I am trying to position an absolutely positioned div on top of another div that has an opacity of less than one. No matter what z-indexes I apply to these two divs the transparent one always renders above the absolutely positioned one in both Safari and Firefox.
Here's a screen shot:
And here's the
And here's the CSS:
border: 1px solid #ccc;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
Here's a little test page
Here's a little test page I've set up to try to figure this out: https://www.clarku.edu/offices/its/atidevelopment/classroomresources/test.cfm
Apparently the opacity has nothing to do with it... I'm completely stumped as to why a relatively positioned div with z-index of 0 would display above an absolutely positioned div with a z-index of 1000...
z-index isn't an absolute.
z-index isn't an absolute. Visit w3c and read the CSS spec on z-index (it'll explain things better than I can).
I'm not entirely certain how you want things to appear, but ...
- For standards compliant browsers (not IE), you don't want to use a z-index value of 0. Leave it at the default, auto. Auto means children with z-index values take part in the same stacking context as their parent. If you give the parent an actual z-index value (even if you are creating a brand new stacking context for its children. That is, the childrens' z-index is isolated from the stacking context of the parent and is only relative to that of any siblings and their descendants.
- For IE ... IE creates a new stacking context whenever position relative is used (effectively the same as z-index:0 in standards compliant browsers), so the solution above is not possible.
The best cross browser solution is to remove position relative from the container elements and rely on the children being drawn above the rest of the page because they have position. To ensure correct vertical location, you'll need to leave the top offset unset (auto) which should locate the element at the vertical position it appears in the content. If you need to alter that location use margin-top.
I figured it
I figured it out!
Apparently, when you use position a div absolutely inside a relatively positioned div, it's z-index is only relative to other elements inside it's parent div. As such, you cannot control it's z-index relative to elements outside of it's parent.
I guess by default each successive parent div would be one z-index above the last one, and so even though the absolutely positioned div was raised to a z-index of 1000 inside it's parent div, the div following it's parent div would still be one up on it.
The only way to control this is by setting descending z-indexes on the parent divs such that the first one is the highest, then all content inside of it (including the absolutely positioned div) will be on top of any following divs.
Phew... That's not quite how I would have expected z-index to work on absolutely positioned divs, but I guess it makes sense since it is only positioned absolute within it's parent, not for the whole page.
Anyway. It's all fixed now...
Oops, sorry I didn't see
Oops, sorry I didn't see your reply. Thanks for taking the time though.
No worries. I'd still read
No worries. I'd still read my reply and the spec as your description of what is happening is not really correct and anyway only applies when you specify position:relative AND z-index (not auto).