1

カスタムDOM要素にオーバーレイを配置できる単純なオーバーレイモジュールを作成しようとしています。問題は、オーバーレイ div の css が position:absolute を指定していることです。ただし、オーバーレイを適用する必要がある要素に position:static を指定できます。この場合、オーバーレイは正しく適用されません。この問題を克服するにはどうすればよいですか？私はこれを思いつきましたが、それが良いかどうかはわかりません。

//js
if ($(elem).css('position') == 'static') {
   $(elem).css('position', 'relative');
}
$('<div></div>').prependTo(elem).addClass('overlay').css('z-index', 100);

// css
div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.75;
    filter: alpha(opacity=75);
}
4

1 に答える 1

1

Thomas Andersen の提案が機能します。わずかな欠点は、複雑さが少し高く、オーバーレイの位置が要素の位置に固定されていないことです。別のアプローチは、次のようにすることです。

div.overlay {
    position: absolute;
    background: #000;
    opacity: 0.75;
    filter: alpha(opacity=75);
}

var width = $(elem).width();
var height = $(elem).height();
$('<div></div>')
    .width(width)
    .height(height)
    .prependTo(elem)
    .addClass('overlay')
    .css('z-index', 100)

ここでは、上/左を指定せずに position:absolute を設定しています。これにより、オフセットを維持しながらオーバーレイがフローから取り出されます。珍しい使い方だと思いますが、これなら頼れると思います。

私が提案した元の解決策は本当のハックであり、すでにいくつかの問題を引き起こしています。

于 2013-08-26T01:59:26.200 に答える