z-index ie7

by a1ex

HTML

<!--[if IE 7]>
<style>
#parent_1 { z-index:1; }
</style>
<![endif]-->
<div id="parent_1">Parent 1
    <div id="child_1">Text child 1</div>
</div>
<div id="parent_2">Parent 2
    <div id="child_2">Text content child 2</div>
</div>

CSS

body { font:15px/1.5em Arial, Helvetica, sans-serif; padding:20px; }
#parent_1, #parent_2 { 
    width:80%; 
    padding:.5em; 
    background:#D7E5E4; 
    margin:0 auto; 
    height:1.5em; 
    border:1px solid #85A0AA; 
    position: relative; 
    text-align: right;
}
#child_1, #child_2 { position: absolute; padding:.6em; border:1px solid #85A0AA; left:.5em; }
#child_1 { background:#EAE2C9; z-index:2; top:-0.2em; }
#child_2 { background:#C9E1EA; z-index:1; top:-1.3em; }