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

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

Answer 2

I know Phrogz' answer has been accepted already, and a good answer it is, but just for the record: you don't always need z-index.

When you have position:relative on one element, it will also be displayed on top of all other elements that have no position (or position:static). Even if you don't have any z-indexes at all!

jsFiddle.