When attempting to retrieve the computed style of an element with no defined position, the result is auto.
I find it surprising that the parent element has z-index: 100;
Should getComputedStyle return 100 for A1 or is auto the correct value (even though the z-index for A1's parent is greater than B)
jsFiddle
CSS
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#A1 {
height: 50px;
width: 200px;
margin-left: 200px;
background-color: #CC0066;
}
#B {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #99CC00;
}
HTML
<div id="container">
<div id="A">
<div id="A1">I am A1, on top of B.
<br />My parent has z-index 100</div>
</div>
<div id="B">
<br />
<br />
<br />I am B and have no z-index. I
<br />f I had `z-index:200;` A1 would not be visible</div>
</div>
Javascript
var elementA1 = document.getElementById('A1');
var a1 = window.getComputedStyle(elementA1).getPropertyValue("z-index");
console.log(a1); // logs 'auto'