html - How to put a static div on top of an absolute position div?

Question

I am building a small web application. I have two divs. One is absolute and the other is static. I am trying to position my static div on top of my absolute one, so that it remains the top most item.

Very simple Code Sample:

http://jsbin.com/efuxe3/edit

How can this be done?

Edit: I have been using z-index. It seems to have no effect.

question from:https://stackoverflow.com/questions/5924431/how-to-put-a-static-div-on-top-of-an-absolute-position-div

Answer 1

z-index doesn't apply to static elements.

According to this page:

This property specifies the stack level of a box whose position value is one of absolute, fixed, or relative.

If you make your div relative instead, you can use z-index to determine the order.

position: relative positions the element relative to its default (static) position, so if you don't specify a top, bottom, left or right then there'll be no difference between static and relative other than that relative allows you to use z-index to move your element up the stack.

Edit: based on your code sample, here's a working demo.

Edit 2: based on Nathan D. Ryan's suggestion in the comments below, you could also apply a negative z-index to your absolutely-positioned div. This would move it behind everything else on the page that didn't have a lower z-index defined.