Div in figcaption which is moved into the figure's image doesn't show its background

Hello everybody,

the markup:

<td>
  <figure>
    <img width="351" height="221" src="somesource.jpg" class="someclass" />
  </figure>
  <figcaption>
    <div id='counter'>
        0
    </div>
    <div id='captionbox'>
      <div id='content'>
            Nur Dummy-Content. </br>
            Das ist witzig, denn hier ist eine neue Zeile!
      </div>
     </div>
  </figcaption>
</td>

The css:

#counter {
    width: 40px;
    height: 40px;
    line-height:40px;
    text-align: center;
    margin: -50px 5px 5px 305px;
    background: white;
}

figure{
    margin: 0;
}

#primary table td{
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 17px;
    padding-bottom: 18px;
}

The output: http://s14.directupload.net/images/140710/edkfhb5m.png http://s7.directupload.net/images/140710/ceuceel7.png

The problem:

The counter-div, of course, should have a white background. Actually it has a white background but it's hidden behind the figure's image. I'm wondering why the "0" is above the figure's image while the white-background of the counter is behind. Do you have any suggestions/solutions/hints? :)

Thank you so much people!

Regards

Solution

Elements within the same stacking context draw the backgrounds first and then the contents. The white background of the counter is there, it's just behind the image, because the paint order in your example is:

background of figure
background of #content
content of figure (the image)
content of #content

The best solution is probably to give both the figure and #content (or figcaption) a z-index and position: relative so that the z-index can apply.