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.

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.

Answer 2

Rather than placing the statically positioned element over the absolutely positioned element, you can place the absolutely positioned element behind the statically positioned element. You can do this by setting the z-index of the absolutely positioned element to a negative value. However, as @Town mentioned, this will also place the absolutely positioned element behind everything else in the normal flow.