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

Answer 1

if by top you mean z-Index, you can set the style of that div with a higher z-index

div.divClassName {
   z-Index:100;
}

edit:

you can change the z-index of your div, with absolute positioning to a negative, but then you will have to do so for every other element.

Unless you really have a really good reason to using positioning to static you can change it to relative, and the z-index will have an effect.io have tried it in your code sample and it works fine;

Answer 2

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 3

You could have a second absolutely positioned div to contain your statically positioned elements:

<div id="container">
   <div class="underlay">
      I want this to appear under my static items.
   </div>

   <div class="item_container">
       <div class="item">blah</div>
       <div class="item">yada</div>
       <div class="item">foo</div>
       <div class="item">bar</div>
   </div>
</div>           

And your css is

.underlay {
   position: absolute;
   z-index: 0;
}

.item_container {
   position:absolute;
   z-index:10;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}

.item {
   position: static;
}

Answer 4

You can apply a negative z-index to the other elements placing them behind the static div. This can be applied directly to the other elements or you can use

*:not(connectedObjects){
    z-index:-1000000000000000000000000000;
  }

But this does not work in internet explorer

Answer 5

Work with z-index attribute. The z-index of the object which should be at front must be higher than the other ones.

Answer 6

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.