A few note on z-index

z-index is widely used in dropdown menu/block to make one div on the top of the other. Here are a few I learned from.

1. Z-index only works on "realtive" or "absolute" position.
2. Higher z-index layer usually on the top of lower one, but in IE7, it's not that obviously. To fix IE7's z-index problem, you need to make sure, set z-index for the same stacking layers. (See example below)

<div id="p1" style="position:relative">
   <div id="c1" style="position:relative; z-index:10">
         I want to be on the top!!!
   </div>
</div>

<div id="p2" style="position:relative; z-index:5">
   <div id="c2" style="position:relative; z-index:5">
        I can be on the bottom!!!
    </div>
</div>

In order to make the above example works in IE7, you have to set 'p1' to have z-index higher than 'p2'.
3. Don't set parent layer's overflow is hidden, that will children cannot overlay.

Good luck