1

我正在尝试制作一个简单的 Overlay 模块，使我能够将叠加层放在自定义 DOM 元素上。问题是覆盖 div 的 css 指定位置：绝对。但是应该应用覆盖的元素可以具有 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

托马斯安徒生的建议奏效了。一个轻微的缺点是复杂性更高一些，并且覆盖的位置没有固定到元素的位置。另一种方法可能是这样做：

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 没有指定 top/left 这应该会导致覆盖从流中取出，同时保持其偏移量。不常见的用法，我猜，但我相信我可以依靠这个。

我提出的原始解决方案是一个真正的黑客，已经给我带来了一些问题。

于 2013-08-26T01:59:26.200 回答