4

私が持っているもの:

固定サイズの Block 要素ですが、動的なコンテンツ サイズとoverflow: scroll;.

私が欲しいもの:

コンテンツの上に透明なレイヤーがあるため、親がどれだけスクロールされても、レイヤーがコンテンツを覆います。

私が試したこと：

.layer {
  position: relative;
  width: 100%;
  height: 100%;
  bottom: 100%;
  z-index: 20;
}

コンテンツの後の親の内部。

問題：

レイヤーは親を適切にカバーしていますが、スクロールするとすぐにコンテンツがカバーされません。

フィドル:

http://jsfiddle.net/wYgWh/2/

赤はすべてをカバーする必要がありますが、多すぎないようにします。

4

3 に答える 3

2

これを試して：

HTML: 

<div class="coverable">
   <div class="layer"></div>
   Content that gets covered!
</div>

CSS:

.coverable {
  position: relative;
}
.coverable .layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  bottom: 100%;
  z-index: 20;
}
于 2013-05-07T19:19:29.000 に答える