IE7 Z-Index Layering Issues
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.
IE7 Z-Index issue - Context Menu
I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.
<div class="control-action" style="float:right">
<div class="control-action-menu">
<ul style="display:none">
<li class="action-remove">Remove</li>
<li class="action-detail">Detail</li>
<li class="action-assigned">Assign</li>
</ul>
</div>
<button>Action</button>
</div>
With this markup change the css has changed into the following:
.control-action
{
text-align:right;
width:100px;
}
.control-action-menu
{
position:relative;
z-index:1;
}
.control-action ul
{
position:absolute;
z-index: 10000;
list-style:none;
}
IE7 CSS z-index issue not apparent on any other browser
This boiled down to a stacking context issue that was only apparent, as many have found, with Internet Explorer 7.
I decided to remove the problematic behaviour for IE7 only, as i'm a believer that an application does not need to look the same in every browser.
IE 6 & IE 7 Z-Index Problem
Agree with validator comment - validating usually helps. But, if it doesn't heres a few pointers for z-index in IE:
1) elements who's z-index you're manipulating should be on the same level ie. you should be setting the z-index of #bottom and #body
if this is not feasible then
2) IE sometimes wont apply the z-index correctly unless the elements ou are applying it to have a position:relative
. Try applying that property to #bottom and #body (or #signpost)
let me know how that works out
Darko
IE7 Z-Index Issue (CSS DropDown)
You may want to add position:relative;
to the part that's dropping down. According to this it'll usually solve your problem.
Yet another IE7 Z-Index Issue (in table cells)
try removing .c { position: relative }
and adding .c:hover { position: relative }
. Not tested but think this should work
here is another: add .c { z-index: 10000 }
and .c:hover { z-index: 10001 }
IE7 z-index issues with jQuery and parent divs (possible stacking context problems)
When you're working with Z-index you have to remember that z-index is only applicable to certain positions: relative, absolute, and fixed.
Also, that, besides setting the z-index on the actual element that you want positioned, you also have to add z-index to its parent element.
Give it a try and let us now how it works. If it doesn't creating a jsfiddle would help a lot : http://jsfiddle.net/
Related Topics
Family Tree With Pure HTML and CSS (Or With Minimal Js)
Css Scrollbar Style Cross Browser
Difference Between Style = "Position:Absolute" and Style = "Position:Relative"
Semi-Transparent Color Layer Over Background-Image
Add Bootstrap Glyphicon to Input Box
Css to Select/Style First Word
Font Awesome 5 Shows Empty Square When Using the Js+Svg Version
How to Float 3 Divs Side by Side Using Css
How to Select an Element Based on the State of Another Element in the Page With Css
Specificity of Inherited CSS Properties
How to Identify Unused CSS Definitions from Multiple CSS Files in a Project
Css :After Not Adding Content to Certain Elements
How to Get Ff 33.X Flexbox Behavior in Ff 34.X
Formatting Numbers (Decimal Places, Thousands Separators, Localization, etc) With CSS
How Does Flex-Wrap Work With Align-Self, Align-Items and Align-Content