#head.

#head{position: relative;}

#main

#main{position: relative;}

All positioned elements have now the same index in every browser. Even IE

            * {
                margin: 0;
                padding: 0;
                border: 0;
                z-index: 0; /* Sets a z-index to all elements. Make use of it */
            }
            #box {position: absolute;z-index: 3;}
            #head, #footer, #main {position: relative;}
        

But the result is differs from the wished one.
We now have to build a functional stack order..
Click here

#footer

#footer{position: relative;}