I'm currently investigating why a child element fails to appear behind its parent element when it has a lower z-index value than the parent. The issue seems to arise only when the default z-index value of the parent is modified.
Let's consider a simple example:
HTML:
<div class="a">
A DIV
<div class="b">
B DIV
</div>
</div>
CSS:
.a {
position: relative;
background: #eaeaea;
height: 200px;
width: 200px;
z-index: 20;
}
.b {
position: relative;
z-index: -20;
background: #d6d6d6;
height: 100px;
width: 100px;
}
Example link: http://jsfiddle.net/V4786/2/
I welcome any insights on this matter.