Baby item 100% parental content

Question

What I have:

A block element with a fixed size but dynamic content size and overflow: scroll; .

What I want:

A transparent layer is above the content, so no matter how far the parent layer scrolls, the layer covers the content.

What I tried:

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

inside the parent after the content.

Problem:

The layer correctly covers the parent, but as soon as I scroll it, it does not extend to the content.

Violin:

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

Red should cover everything, but not too much;

Answer 1

Height: 100%; give the element the same height as the parent. The parent you identified is not as tall as the content you want to cover.

If you put a “layer” inside your “content” in your markup, you can then set it in relation to the “content”. So now, height: 100% will relate to the content instead of the “parent” (scroll window).

In addition, if you want to position something absolute, this element will be related to it by the nearest non-static parent.

Here is the fiddle .

Answer 2

Try the following:

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; } 

Answer 3

need to do

 .layer { position: fixed; }