Fixed position and z-index

Yes, those fixed-positioned elements are annoying; please bear with me.

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.

Is this a bug, or expected behaviour? I’m really not sure. Comments, please!


Tweet

Comments

Sat 28 Nov 2009 09:57

Danny

Danny said:

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…

Fri 22 Jan 2010 12:30

raf

raf said:

Sounds plausible and works as you described, Danny. But how come the paragraph following the list, "Is this a bug…", does not behave the same way? Why does this behaviour only apply to the list?

Sun 24 Jan 2010 11:27

Five Minute Argument

Five Minute Argument said:

@raf: That paragraph is not positioned, so it’s in the normal flow. With no z-index (and, therefore, the deafult value 'auto'), the positioned green div will be rendered 'in front of' any normal-flow block.

z-index gets pretty complicated, especially when nesting blocks or applying a negative value to the property. I think a nice visual example covering the possible cases is called for.

Mon 2 May 2011 13:02

said:

Thanks, you saved my time.

Wed 24 Aug 2011 03:21

Simon Brandon

Simon Brandon said:

You are an absolute star — I've been pulling my hair out trying to get a div to go above a fixed position div for ages, messing around with z-index without success. Just set the div in question to position:relative and it happily slides over the position:fixed div.

Thu 13 Oct 2011 13:44

Jonathan Gala

Jonathan Gala said:

Nice illustration, thanks.

Simon and Five Minute Argument: there is a nice tutorial on z-index (and some bugs in earlier IE implementations) here:

http://aplus.rs/lab/z-pos/

… that’s not my site, btw, but it’s a good overview, with nicely prepared examples. It helped my understanding of z-index a lot.

Wed 14 Dec 2011 01:21

Jim

Jim said:

Thanks for raising this issue along with an example — and thanks a lot Danny for answering it. Perfect!

Regards,

Jim

Sat 13 Dec 2014 12:11

non prescription cialis online pharmacy

non prescription cialis online pharmacy said:

Hi there, I enjoy reading all of your post. I like to write a

little comment to support you.

Mon 15 Dec 2014 21:23

generic cialis canada

generic cialis canada said:

Your means of explaining all in this post is genuinely good, all be capable

of effortlessly understand it, Thanks a lot.

Leave a comment