Recently i worked at site gallery, and trying to make description label in front of image. So, this is how it should look:
its html:
<li class="project-item">
<img src="images/project_example.jpg" alt="">
<div class="annotation">
<div class="annotation_head">Head</div>
<div class="annotation_footer">Footer</div>
</div>
</li>
Block with .annotation class is absolute, and .project-item is relative. But before that i used another solution which look odd to me, and i cant explain its behavior. Here it is:
I replaced position: absolute
rule with margin-top: -50px
, and change color
from black to red, for clarity.
Strange thing is, that background color displayed back from image, but it should be in front of it, why ? is there any reasonably css rule ?
The reason you are seeing text separated from it's background is because element backgrounds and foregrounds are independent.
I added a black background to the
.project-item
li
and you can see that the red child bg is correctly positioned on top of the black parent bg..annotation
appears in the DOM after theimg
so those foregrounds are also properly layered. If you want your red annotation background to be visible above theli
foreground then you are required to start a new document flow scoped withinli.project-item
.In this case the desired positioning is achieved with
.slider .project-item .annotation{ position: absolute;}
which is currently overridden by yourstatic
positioning.