Absolute, relative and z-index

Example 1 (Source)

<div style="position: relative; z-index: 0">
  <div style="position: absolute; z-index: 10000; width: 100px; height: 200px; top: 0; left: 0; background-color: pink">
  </div>
</div>
<div style="position: relative; z-index: 1">
  <div style="position: absolute; z-index: 10; width: 200px; height: 100px; top: 0; left: 0; background-color: black">
  </div>
</div>

Example 1 (Output)

Firefox, Safari and IE: black overlaps pink

Example 2 (Source)

<div style="position: relative;">
  <div style="position: absolute; z-index: 10000; width: 100px; height: 200px; top: 0; left: 0; background-color: pink">
  </div>
</div>
<div style="position: relative;">
  <div style="position: absolute; z-index: 10; width: 200px; height: 100px; top: 0; left: 0; background-color: black">
  </div>
</div>

Example 2 (Output)

Firefox and Safari: pink overlaps black

IE: black overlaps pink

See http://24ways.org/advent/zs-not-dead-baby-zs-not-dead for more information.