I've isolated a little test case of IE7's z-index bug, but don't know how to fix it.
I have been playing with z-index all day long.
What is wrong with z-index in IE7?
Test CSS:
input {
border: 1px solid #000;
}
div {
border: 1px solid #00f;
}
ul {
border: 1px solid #f00;
background-color: #f00;
list-style-type: none;
margin: 0;
padding-left: 0;
z-index: 1000;
}
li {
color: #fff;
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
span.envelope {
position: relative;
}
span.envelope ul {
position: absolute;
top: 20px;
left: 0;
width: 150px;
}
Test HTML:
<form>
<label>Input #1:</label>
<span id="envelope-1" class="envelope">
<input name="my-input-1" id="my-input-1" />
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</span>
<br><br>
<label>Input #2:</label>
<span id="envelope-2" class="envelope">
<input name="my-input-2" id="my-input-2" />
</span>
</form>
Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.
When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.
In short, try adding this CSS:
#envelope-1 {position:relative; z-index:1;}
or redesign the document such that your spans don't have position:relative any longer:
<html>
<head>
<title>Z-Index IE7 Test</title>
<style type="text/css">
ul {
background-color: #f00;
z-index: 1000;
position: absolute;
width: 150px;
}
</style>
</head>
<body>
<div>
<label>Input #1:</label> <input><br>
<ul><li>item<li>item<li>item<li>item</ul>
</div>
<div>
<label>Input #2:</label> <input>
</div>
</body>
</html>
See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ for a similar example of this bug. The reason giving a parent element (envelope-1 in your example) a higher z-index works is because then all children of envelope-1 (including the menu) will overlap all siblings of envelope-1 (specifically, envelope-2).
Although z-index lets you explicitly define how things overlap, even without z-index the layering order is well defined. Finally, IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else.
http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
In IE positioned elements generate a new stacking context, starting
with a z-index value of 0. Therefore z-index doesn’t work correctly.
Try give the parent element a higher z-index value (can be even higher than the child’s z-index value itself) to fix the bug.
I encountered this issue, but on a large project where HTML changes had to be requested and became a whole issue, so I was looking for a pure css solution.
By placing position:relative; z-index:-1 on my main body content my header drop down content suddenly displayed above the body content in ie7 (it was already displaying without issue in all other browsers and in ie8+)
The problem with that was then this disabled all hover and click actions on all content in the element with the z-index:-1 so i went to the parent element of the whole page and gave it a position:relative; z-index:1
Which fixed the issue and retained the correct layering functionality.
Feels a bit hacky, but worked as required.
I found that I had to place a special z-index designation on div in a ie7 specific styelsheet:
div { z-index:10; }
For the z-index of unrelated divs, such as a nav, to show above the slider. I could not simply add a z-index to the slider div itself.
If the previously mentioned higher z-indexing in parent nodes wont suit your needs, you can create alternative solution and target it to problematic browsers either by IE conditional comments or using the (more idealistic) feature detection provided by Modernizr.
Quick (and obviously working) test for Modernizr:
Modernizr.addTest('compliantzindex', function(){
var test = document.createElement('div'),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
root.appendChild(test);
test.style.position = 'relative';
var ret = (test.style.zIndex !== 0);
root.removeChild(test);
if (fake) {
document.documentElement.removeChild(root);
}
return ret;
});
It looks like not a ie bug, just for diffrent understanding to the css standard. If outside container is not specified the z-index, but the inner element specified a higher z-index. So the container's sibling maybe overlay the high z-index element. Even if like that, it only occurs in IE7, but IE6, IE8 and Firefox is ok.
In IE6 in general, certain UI-elements are implemented with native controls. These controls are rendered in a completely separate phase (window?) and always appear above any other controls, regardless of z-index. Select-boxes are another such problematic control.
The only way to work-around this issue is to construct content which IE renders as a seperate "window" - i.e. you can place a selectbox over a textbox, or, more usefully, an iframe.
In short, you'll need to put "on-hover" like things such as menu's in an iframe in order to let IE place these above built-in UI controls.
This should have been fixed in IE7 (see http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx) but perhaps you're running in some kind of compatibility mode?
This bug seems to be somewhat of a separate issue than the standard separate stacking context IE bug. I had a similar issue with multiple stacked inputs (essentially a table with an autocompleter in each row). The only solution I found was to give each cell a decreasing z-index value.
If you wanna create dropdown menu and having a problem with z-index, you can solve it by creating z-indexes of same value (z-index:999; for example).. Just put z-index in parent and child div's and that will solve problem. I solve the problem with that. If i put different z-indexes, sure, it will show my child div over my parent div, but, once i want to move my mouse from menu tab to the sub-menu div (dropdown list), it dissapear... then i put z-indexes of same value and solve the problem..
I solved it by using the developer tools for IE7 (its a toolbar) and adding a negative z-index to the container of the div that will be below that the other div.
Related
So if I understand z-index correctly, it would be perfect in this situation:
I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?
z-index:-1 // on the image tag/card
or
z-index:100 // on the div above
doesn't work either. Neither does a combination of anything like this. How come?
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
If you set position to other value than static but your element's z-index still doesn't seem to work, it may be that some parent element has z-index set.
The stacking contexts have hierarchy, and each stacking context is considered in the stacking order of the parent's stacking context.
So with following html
div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
<div id="el3" style="z-index: 8"></div>
</div>
no matter how big the z-index of el3 will be set, it will always be under el1 because it's parent has lower stacking context. You can imagine stacking order as levels where stacking order of el3 is actually 3.8 which is lower than 5.
If you want to check stacking contexts of parent elements, you can use this:
var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
There is a great article about stacking contexts on MDN
Your elements need to have a position attribute. (e.g. absolute, relative, fixed) or z-index won't work.
In many cases an element must be positioned for z-index to work.
Indeed, applying position: relative to the elements in the question would likely solve the problem (but there's not enough code provided to know for sure).
Actually, position: fixed, position: absolute and position: sticky will also enable z-index, but those values also change the layout. With position: relative the layout isn't disturbed.
Essentially, as long as the element isn't position: static (the default setting) it is considered positioned and z-index will work.
Many answers to "Why isn't z-index working?" questions assert that z-index only works on positioned elements. As of CSS3, this is no longer true.
Elements that are flex items or grid items can use z-index even when position is static.
From the specs:
4.3. Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw
document order, and z-index values other than auto create a stacking context even if position is static.
5.4. Z-axis Ordering: the z-index property
The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is
used in place of raw document order, and z-index values other than auto create a stacking context even if
position is static.
Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
Make sure that this element you would like to control with z-index does not have a parent with z-index property, because element is in a lower stacking context due to its parent’s z-index level.
Here's an example:
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>
// CSS //
.content {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 100;
}
.side-tab {
position: fixed;
z-index: 5;
}
In the example above, the modal has a higher z-index than the content, although the content will appear on top of the modal because "content" is the parent with a z-index property.
Here's an article that explains 4 reasons why z-index might not work:
https://coder-coder.com/z-index-isnt-working/
Z-index needs these to work:
Position: relative, absolute, fixed, ..
Make sure that the parent element hasn't overflow: hidden;
I have had the same problem with z-index
and you believe me or not it's fixed just by setting the background color
like this
background-color: white;
If all else fails, look for syntax errors in your HTML. It's not intuitive, but I've seen it be the reason why z-index doesn't work.
The following code has invalid HTML syntax:
<div class="over"/>
<div class="under"/>
...(it's is invalid syntax because a div isn't a self closing tag).
CSS properties that were applied to these rogue HTML elements, such as background-color: black, position: fixed, width: 150px, and top:150px, were all working as expected. However, the z-index: 2 property wasn't working under the exact same conditions.
Only when the invalid HTML was fixed did the z-index work correctly.
I'm not sure why z-index was pickier than the other CSS attributes, but maybe this answer can help someone.
In my case I had my Navbar's opacity to 0.9, I got my answer from codercoder.com, as I removed the opacity property from my Navbar's css, z-index worked
just give position other that static. And u should give both container a position than it will work.
So if I understand z-index correctly, it would be perfect in this situation:
I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this?
z-index:-1 // on the image tag/card
or
z-index:100 // on the div above
doesn't work either. Neither does a combination of anything like this. How come?
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
If you set position to other value than static but your element's z-index still doesn't seem to work, it may be that some parent element has z-index set.
The stacking contexts have hierarchy, and each stacking context is considered in the stacking order of the parent's stacking context.
So with following html
div { border: 2px solid #000; width: 100px; height: 30px; margin: 10px; position: relative; background-color: #FFF; }
#el3 { background-color: #F0F; width: 100px; height: 60px; top: -50px; }
<div id="el1" style="z-index: 5"></div>
<div id="el2" style="z-index: 3">
<div id="el3" style="z-index: 8"></div>
</div>
no matter how big the z-index of el3 will be set, it will always be under el1 because it's parent has lower stacking context. You can imagine stacking order as levels where stacking order of el3 is actually 3.8 which is lower than 5.
If you want to check stacking contexts of parent elements, you can use this:
var el = document.getElementById("#yourElement"); // or use $0 in chrome;
do {
var styles = window.getComputedStyle(el);
console.log(styles.zIndex, el);
} while(el.parentElement && (el = el.parentElement));
There is a great article about stacking contexts on MDN
Your elements need to have a position attribute. (e.g. absolute, relative, fixed) or z-index won't work.
In many cases an element must be positioned for z-index to work.
Indeed, applying position: relative to the elements in the question would likely solve the problem (but there's not enough code provided to know for sure).
Actually, position: fixed, position: absolute and position: sticky will also enable z-index, but those values also change the layout. With position: relative the layout isn't disturbed.
Essentially, as long as the element isn't position: static (the default setting) it is considered positioned and z-index will work.
Many answers to "Why isn't z-index working?" questions assert that z-index only works on positioned elements. As of CSS3, this is no longer true.
Elements that are flex items or grid items can use z-index even when position is static.
From the specs:
4.3. Flex Item Z-Ordering
Flex items paint exactly the same as inline blocks, except that order-modified document order is used in place of raw
document order, and z-index values other than auto create a stacking context even if position is static.
5.4. Z-axis Ordering: the z-index property
The painting order of grid items is exactly the same as inline blocks, except that order-modified document order is
used in place of raw document order, and z-index values other than auto create a stacking context even if
position is static.
Here's a demonstration of z-index working on non-positioned flex items: https://jsfiddle.net/m0wddwxs/
Make sure that this element you would like to control with z-index does not have a parent with z-index property, because element is in a lower stacking context due to its parent’s z-index level.
Here's an example:
<section class="content">
<div class="modal"></div>
</section>
<div class="side-tab"></div>
// CSS //
.content {
position: relative;
z-index: 1;
}
.modal {
position: fixed;
z-index: 100;
}
.side-tab {
position: fixed;
z-index: 5;
}
In the example above, the modal has a higher z-index than the content, although the content will appear on top of the modal because "content" is the parent with a z-index property.
Here's an article that explains 4 reasons why z-index might not work:
https://coder-coder.com/z-index-isnt-working/
Z-index needs these to work:
Position: relative, absolute, fixed, ..
Make sure that the parent element hasn't overflow: hidden;
I have had the same problem with z-index
and you believe me or not it's fixed just by setting the background color
like this
background-color: white;
If all else fails, look for syntax errors in your HTML. It's not intuitive, but I've seen it be the reason why z-index doesn't work.
The following code has invalid HTML syntax:
<div class="over"/>
<div class="under"/>
...(it's is invalid syntax because a div isn't a self closing tag).
CSS properties that were applied to these rogue HTML elements, such as background-color: black, position: fixed, width: 150px, and top:150px, were all working as expected. However, the z-index: 2 property wasn't working under the exact same conditions.
Only when the invalid HTML was fixed did the z-index work correctly.
I'm not sure why z-index was pickier than the other CSS attributes, but maybe this answer can help someone.
In my case I had my Navbar's opacity to 0.9, I got my answer from codercoder.com, as I removed the opacity property from my Navbar's css, z-index worked
just give position other that static. And u should give both container a position than it will work.
I've come across a strange "bug" on Chrome where the z-index is not showing properly like in every other browser (including IE).
I've read all related questions related to it and almost everyone in their questions were missing position or overflow.
The link for the website is THIS and there is a dropdown ul element in the middle search that when you click it, is behind the pictures. I've tried for hours all possible combinations with child-parent, different z-indexes, positions and nothing seem to get the dropdown in front of the pictures.
I would really appreciate it if someone could point me in the right direction or provide a sample to help me out.
Thanks!
Solution from answers: The div element which had the problem, has around 10 div elements above it as "parents". His z-index could not get in the front because his highest parent did not have position:relative, only had z-index which caused the problem for all other child divs below it.
Here is an example:
<div> <---- had only z-index, was missing position:relative
<div>
<div>
<div> <---- this div with z-index could not get in front because of the first one
</div>
</div>
</div>
</div>
You have to add
z-index: 1000; /* or whatever value works*/
position: relative;
to your #big-map. This will fix it. You forgot to add a position to that div, which makes that a z-index doesn't get applied.
The CSS of #big-map should look like this:
#big-map {
width: 100%;
height: auto;
/* background-color: rgb(229, 227, 223); */
/* background-color: #E0E0E0; */
-webkit-transform: translateZ(0);
display: block;
z-index: 1000;
position: relative;
}
I agree with Toni Leigh though: in the future you need to share code and a working example, so this question is also value in the future. If you can't share code or set up an example with a minimum amount of code, you can always ask it in the chat, where we gladly help you with such "bugs".
This is not a bug. The fact is that z-index must be defined on the parent element as well. Basically, how is an element supposed to act if the child has a higher z-index than the parent?
The problem is on your #big-map which is the parent.
It must have a high z-index, and position relative:
z-index: 10000;
position: relative;
adding that to your #big-map will solve it.
Only solved when the z-index is added to the tag for position absolute and fixed.
<div style="z-index:110">
No matter how high the value is in CSS, chrome bug converts it to a maximum of 17.
z-index:99999999999999999999999999999999;// translates into z-index:17
I have a dropdown css menu that gets gets hidden behind the main page content when viewed in IE7. I've tried changing z-index values but have had no luck. I've also tried suggestions in other topics from this site but none have worked.
the page can be found here: www.melbournedodgeball.com.au/dodgeball2012/about
any help would be greatly appreciated
The CSS spec's paragraph on Z-index says that new stacking context is only created for positioned content with a z-index other than auto.
You have the li inside #nav with a position:relative, an apparently IE interprets this as a new stacking context.
Try this:
#nav li {
display: block;
position: relative;
z-index: 1; // force IE to recognize stack at this point
}
You need to add
position:relative;
To your <ul>
Z-Index is specified relative to all other elements in the same stacking context. You can have a Z-Index of 100 but it wont make a bit of difference if the elements belong to completely different stacking contexts.
I have test this code, It will work sure
Please set this css for IE7 only
#menu {position:relative; z-index:100;}
The header of my site has a button which, when clicked, should bring up a popup, with a form inside, (just below the button) allowing customers to search the site.
My Jquery code to do this:
<script type='text/javascript'>
$(document).ready(function () {
$('#search-my-size-inner').click(function() {
$('#search-my-size-lightbox').toggle();
$("#search-my-size-lightbox").css("z-index","1000");
});
});
</script>
My div, search-my-size-lightbox, has the following CSS.
.lightbox-search-my-size { color: #673645; opacity: 0.9; filter:alpha(opacity=90); background: #fff; }
#search-my-size-lightbox { position: absolute; width:390px; right: 0; top: 26px; display: none; }
And the div is:
<div id='search-my-size-lightbox' class='lightbox-search-my-size'>my content </div>
This works fine on all browsers except IE7. The 'z-index' is unnecessary since I can do that from CSS, but it was worth a try for IE7 but still did not fix the bug.
The bug is that the div is "hidden" (or blocked) by several other absolute and relative elements below. If I move the div way down to before the "/body" tag, then the div shows. However, I need it up in the code within its parent "relative" tag to position is correctly.
The div shows fine over normal content, it is just that there are some big home page banners below the header, with several relative and absolute divs, which block the popup content. If I remove those "position" attributes, then the popup shows fine, but of course the home page banners' layout is messed up so this is not a solution.
Also, if I change #search-my-size-lightbox to position: relative, then it will work, but this simply pushes content down, and I need an absolute, popup-like div.
The following looks useful but doesn't seem to work for me:
1. Positioning divs with z-Index in Internet Explorer 7
2. http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/
3. IE7 relative/absolute positioning bug with dynamically modified page content
Any advice would be appreciated,
Many thanks!
The problem seems to be related to the stacking context. The z-index property only affects the stacking order of the children in a single parent, not to elements with different parents. See the "Understanding z-index and stacking contexts" section of the YUI Overlay documentation for more information about this.