3

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

hjpotter92
  • 78,589
  • 36
  • 144
  • 183
David Shears
  • 96
  • 1
  • 2
  • 8
  • 1
    Then you must use three independent divs. In the moment `#bottom` lies under `#middle`. `#top` is a child of `#bottom` and that means that it also is under `#middle` (independent from its `z-index`, because that is relative to the next positioned parent. – Sven Bieder Mar 01 '13 at 19:05
  • even though theyre using fixed positioning? i thought fixed was an extension of absolute and therefore relative positioning wouldnt effect this situation – David Shears Mar 01 '13 at 19:08
  • This might clarify: http://stackoverflow.com/questions/1384604/css-positionfixed-inside-of-position-fixed – bmavity Mar 01 '13 at 19:11
  • No, fixed is no extension. Every position (except static) follows the same rules. – Sven Bieder Mar 01 '13 at 19:12
  • i understand. thank you. i will work on another solution – David Shears Mar 01 '13 at 19:16

2 Answers2

0

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.

chipcullen
  • 6,840
  • 1
  • 21
  • 17
  • i get it now. thank you, i will figure out a workaround. i thought there might have been a quick solution that my lack of expertise in html might have overlooked – David Shears Mar 01 '13 at 19:15
  • I don't know how tied your hands are in terms of the markup, but a super kludgy work around would be to manipulate the DOM with JS. I would really try to avoid that, though. – chipcullen Mar 01 '13 at 19:20
0

Try with this : 

<div id='middle' style='position: fixed; z-index: 50;width: 100px; height: 100px; background: red; top: 100px;'></div>

    <div id='bottom' style='position: fixed; z-index: 0; width: 100px; height: 100px; background: blue; bottom: 0px;'> 
        <div id='top' style='position: fixed; z-index: 100; width: 100px; height: 100px; background: green; top: 0px;'></div> 
    </div>
d.danailov
  • 9,594
  • 4
  • 51
  • 36
  • this produces the same result as i had before, the addition of colors just visually shows my problem. thank you though – David Shears Mar 01 '13 at 19:15
  • Sure ? My result is top, middle, bottom, not middle, top, bottom – d.danailov Mar 01 '13 at 19:18
  • yah what your displaying is an objects top middle bottom in relation to the y-axis. i was looking for the reorganization of the objects along the z-axis. more like layering than positioning. thanks for the help though – David Shears Mar 22 '13 at 17:40