3

Recently i worked at site gallery, and trying to make description label in front of image. So, this is how it should look:

enter image description here

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:

enter image description here

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 ?

kirugan
  • 2,514
  • 2
  • 22
  • 41
  • 2
    Show us your **CSS**. Or make a [jsfiddle](http://jsfiddle.net/). – Vucko Feb 24 '13 at 14:22
  • @Vucko updated with links – kirugan Feb 24 '13 at 14:40
  • Remove `position:static;` from `.slider .project-item .annotation`. That should bring the whole `.annotation` to front. Or you want some other efect ? – Vucko Feb 24 '13 at 14:49
  • Nope, i`ve set to static, because want override absolute value. Everything works like i want on the first link, i cant understand why image layer displayed over background annotation – kirugan Feb 24 '13 at 14:58
  • ok, this is weird... Why the background of `.annotation` is behind the img and the text is in front? – xpy Feb 24 '13 at 15:27
  • 1
    That's the first time I see something like that, apparently that's the way `static` elements are rendered,seems odd and wrong to me but I've done some tests and I had the same results, an elements content gets in front of another elements background http://jsfiddle.net/pavloschris/U445r/ we learn something new every day! :D – xpy Feb 24 '13 at 15:41

1 Answers1

1

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 the img so those foregrounds are also properly layered. If you want your red annotation background to be visible above the li foreground then you are required to start a new document flow scoped within li.project-item.

In this case the desired positioning is achieved with .slider .project-item .annotation{ position: absolute;} which is currently overridden by your static positioning.

Backgrounds layered properly

Dylan Valade
  • 5,565
  • 6
  • 42
  • 56
  • is it documented somewhere, that background is separated ? there must be some rule on which browsers look at – kirugan Feb 24 '13 at 17:02
  • W3C specs define it pretty clearly in 14.1 and 14.2. `color` means foreground. http://www.w3.org/TR/CSS21/colors.html "Backgrounds of elements that form a stacking context are painted at the bottom of the element's stacking context, below anything in that stacking context." – Dylan Valade Feb 24 '13 at 17:40
  • Thanks for your answer, but i think description in link that you gave, is reffered properly to z-index, anyway i will search for deep explanations in w3.org. – kirugan Feb 24 '13 at 18:45