javascript - getComputedStyle returns unexpected z-index -

when trying computed style of element without position defined auto.

the unexpected part me here parent element has z-index: 100;

should getcomputedstyle return 100 a1 or auto correct value (although z-index a1's parent > 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 a1, on top of b.             <br />my parent has z-index 100</div>     </div>     <div id="b">         <br />         <br />         <br />i b , have no z-index.         <br />f had `z-index:200;` a1 not visible</div> </div> 

javascript

var elementa1 =  document.getelementbyid('a1'); var a1 = window.getcomputedstyle(elementa1).getpropertyvalue("z-index"); console.log(a1); // logs 'auto' 

you need set position: relative; #a1 in order proper value z-index.

and if #a element has z-index, #a1 should have z-index:inherit;

i updated fiddle , works: http://jsfiddle.net/6djpy/1/

see details: https://bugs.webkit.org/show_bug.cgi?id=15562#c13