<script type="text/javascript" src="core.js"></script>
<script type="text/javascript" src="selector.js"></script>
+
+ <style type="text/css">
+ .zindex {z-index: 100}
+ .absolute {position: absolute}
+ </style>
</head>
<body>
<div id="aria"></div>
- <div id="zIndex100" style="z-index: 100;">
+ <div id="zIndex100" style="z-index: 100; position: absolute">
<div id="zIndexAutoWithParent"></div>
</div>
+ <div id="zIndex100ViaCSS" class="zindex">
+ <div id="zIndexAutoWithParentViaCSS"></div>
+ </div>
+ <div id="zIndex100ViaCSSPositioned" class="zindex absolute">
+ <div id="zIndexAutoWithParentViaCSSPositioned"></div>
+ </div>
<div id="zIndexAutoNoParent"></div>
</div>
});
test('zIndex', function() {
- var el = $('#zIndexAutoWithParent');
+ var el = $('#zIndexAutoWithParent'),
+ parent = el.parent();
equals(el.zIndex(), 100, 'zIndex traverses up to find value');
- equals(el.zIndex(200), el, 'zIndex setter is chainable');
+ equals(parent.zIndex(200), parent, 'zIndex setter is chainable');
equals(el.zIndex(), 200, 'zIndex setter changed zIndex');
+ el = $('#zIndexAutoWithParentViaCSS');
+ equals(el.zIndex(), 0, 'zIndex traverses up to find CSS value, not found because not positioned');
+
+ el = $('#zIndexAutoWithParentViaCSSPositioned');
+ equals(el.zIndex(), 100, 'zIndex traverses up to find CSS value');
+ el.parent().zIndex(200);
+ equals(el.zIndex(), 200, 'zIndex setter changed zIndex, overriding CSS');
+
equals($('#zIndexAutoNoParent').zIndex(), 0, 'zIndex never explicitly set in hierarchy');
});
if (zIndex !== undefined) {
return this.css('zIndex', zIndex);
}
-
- var elem = this[0];
- while (elem && elem.style) {
- // IE returns 0 when zIndex is not specified
- // other browsers return an empty string
- // we ignore the case of nested elements with an explicit value of 0
- // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
- if (elem.style.zIndex !== '' && elem.style.zIndex !== 0) {
- return +elem.style.zIndex;
+
+ if (this.length) {
+ var elem = $(this[0]), position, value;
+ while (elem.length && elem[0] !== document) {
+ // Ignore z-index if position is set to a value where z-index is ignored by the browser
+ // This makes behavior of this function consistent across browsers
+ // WebKit always returns auto if the element is positioned
+ position = elem.css('position');
+ if (position == 'absolute' || position == 'relative' || position == 'fixed')
+ {
+ // IE returns 0 when zIndex is not specified
+ // other browsers return a string
+ // we ignore the case of nested elements with an explicit value of 0
+ // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
+ value = parseInt(elem.css('zIndex'));
+ if (!isNaN(value) && value != 0) {
+ return value;
+ }
+ }
+ elem = elem.parent();
}
- elem = elem.parentNode;
}
return 0;