IE7 Absolute element appearing behind relative one

Question

I know there is the bug where absolute elements appear above relative ones. However I am getting the reverse of this issue.

The z-index on the \"bottom\" element is

Answer 1

I've found a helpful resource to address this:

Long story short, if your absolutely placed element is empty, IE doesn't like to place it in front of other elements (eg. relatively placed text). You can use a 1x1 transparent gif to overcome this, eg. by setting a style like the following on your absolutely placed element.

 .mask {
   background: transparent url('/images/clear.gif') repeat 0 0;
 }