Untitled

<div style="position:relative;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative;">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>

<div style="position:relative; z-index:2;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>
<div style="position:relative; z-index:1">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>

<div style="position:relative;">
  <div style="position:absolute; z-index:1;">BAR</div>
</div>
<div style="position:relative;">
  <div style="position:absolute; z-index:1000;">FOO</div>
</div>

<body>
    <div style="position:relative; z-index:2;">
    	OUTERFOO
    	<div style="position:absolute; z-index:1000; background:red;">
    		FOO
    	</div>
    </div>
    <div style="position:relative; z-index:1">
    	OUTERBAR
    	<div id="bar" style="position:absolute; top:-30px; z-index:1; background:green;">
    		BAR
    	</div>
    </div>
    <button onclick="moveThisCrapForIE7();">Test</button>
    <script type="text/javascript" language="javascript">
    	// Probably best to kick this off when your body is totally loaded.
    	// jQuery's $(document).ready is really good for that.
    	// for now I'm just using a button to test.
    	function moveThisCrapForIE7() {
    		// You'll need something more reliable for browser detection here, this will only get IE7 not IE6.
    		// I'd recommend jQuery for everything really. It'll save you miles of code.
    		if(navigator.appVersion.indexOf('MSIE 7') > -1) {
    			// Get your element and move it to where you want it.
    			var bar = document.getElementById('bar');
    			document.body.appendChild(bar);
    			//Then you'll need to monkey with the location
    			// to make sure it's where you want it.
    			bar.style.top = '15px';
    			bar.style.left = '90px';
    			bar.style.zIndex = '3';
    		}
    	}
    </script>
</body>