A great article/blog post: http://www.fiveminuteargument.com/fixed-position-z-index
The two fixed-position divs on this page are marked up as:
<div class="fixed" id="green"></div> <div class="fixed" id="orange"></div>
and styled thus:
.fixed { width: 50%; margin: 0 auto; height: 50px; position: fixed; } #green { top: 50px; background-color: #CEE14B; } #orange { top: 110px; background-color: #FCAF3E; z-index: 1; }
Note that the lower, orange element has a z-index
specified, whilst the first element doesn’t. The ul
just below this text has a relative
position
. When the page is scrolled, and the orange div
overlaps that list, all looks fine. When the green div overlaps it, however, the list items are shown in front of it.
- one
- two
- three
Is this a bug, or expected behaviour? I’m really not sure. Comments, please!
This comment for the page explains what is happening:
expected behavior…
Since the green DIV has no z-index priority… it is on the same plane as every other non z-indexed element on the page. The indexing now falls to where it’s placed in the code. Since it’s before the UL list… it has a lower indexing on that plane… If you place the green DIV after the UL list… you’ll see that it now goes over the UL list… thus having a higher indexing on that plane…
Revisions
- October 18, 2013 @ 00:45:29 [Current Revision] by PeterLugg
- October 18, 2013 @ 00:45:29 by PeterLugg
- October 18, 2013 @ 00:45:03 by PeterLugg
No comments yet.