Z-Index problem with IE

I spent couple of hours to find the solution of this bug, so I just post it here hope it can help somebody else.

The problem is introduced here http://www.quirksmode.org/bugreports/archives/2006/01/Explorer_z_index_bug.html

and here
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Some of the solutions proposed are here:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
http://systembash.com/content/css-z-index-internet-explorer/

What really worked for me was the combination of two solution above, set position:relative to the containing divs and give each containing div higher value of z-index of the contained one.

Case example :

<div style="z-index:5; position:relative">

    <div style="z-index:4">

        <div style="z-index:3">

        </div>

    </div>

</div>

<div style="z-index:2; position:relative">

    <div style="z-index:1">

    </div>

</div>


For the code above, we should be able to see the div with z-index 3 on top of the divs positioned after it (z-index 2 and 1).