i am trying to get elements on a page display properly. the layout looks like this.
<div id='middle' style='position: fixed; z-index: 50;'></div>
<div id='bottom' style='position: fixed; z-index: 0;'>
<div id='top' style='position: fixed; z-index: 100;'></div>
</div>
so I want the bottom div to be on the bottom and nested within it a div that will appear on the top, and an adjacent div to be in the middle. Currently it is appearing (in display order from top to bottom): middle, top, bottom but I want it to display top, middle, bottom.
The nesting is important for the top div to access the bottom div as a parent object and the middle div to be independent of the two others.
I'm using inline css to keep this question confined and direct and save the hassle of organizing a css page
In short, without altering your markup, you can't do what you're after. The z-index of "middle" and "bottom" will take effect, but "top" will never appear on top of "middle". It's because "middle" and "bottom" are siblings - "top", as a child element, can't trump the z-index of it's parent.