html - Z-Index without absolute position

Question

As a result of CSS trickery like negative margins, occasionally I have some HTML that is rendered below HTML content that occurs later in the HTML document. Even though the original elements should technically be below the later elements, I'd like to display the above the later elements.

Is it possible to make an HTML element appear above another element without having to specify an absolute position? It doesn't appear that z-index has any effect without an absolute position.

Answer 1

Yes: use position:relative; z-index:10.

z-index has no effect for position:static (the default).

Note that z-index is not a global layering system, but only differentiates ordering within each positioned parent. If you have:

<style type="text/css">
  div { position:relative }
  #a  { z-index:1  }
  #a1 { z-index:99 }
  #b  { z-index:2  }
</style>
...
<div id="a"><div id="a1">SUPER TALL</div></div>
<div id="b">I WIN</div>

...then #a1 will never render above b, because #b is layered above #a. You can see a demo of this at http://jsfiddle.net/DsTeK