Position relative problem in ie7

HTML & CSS
1

I have place two div one after another. All these div have position relative property. When I placing another div with position absolute property its goes under the second div. while z-index property also not working in this manner.

Please help me.

The HTML structure given below.

<div class=“block1”>
<div class="block2> content</div>
</div>
<div class="block1></div>

The CSS structure given below.

.block1{
position:relative;
width:100px;
height:200px;
}
.block2{
position:absolute;
width:100px;
height:200px;
top:10px;
left:10px;
z-index:9
}

2

You have some typos in your code (missing "): e.g.

<div class="block2[COLOR="Red"]"[/COLOR]>

All the same, IE7 and under is a bit screwy with z-index. If you need to use “block1” more than once, it might be better to wrap the first one in a special container with a higher z-index than “block1”. E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
	
<style type="text/css" media="all">
[COLOR="Red"].outer {position:relative; z-index:8;}[/COLOR]

.block1{
position:relative;
width:100px;
height:200px;
background: blue;
}

.block2{
position:absolute;
width:100px;
height:200px;
top:10px;
left:10px;
z-index:9;
background:red;
}
</style>
</head>

<body>

[COLOR="Red"]<div class="outer">[/COLOR]
<div class="block1">
<div class="block2"> content</div>
</div>
[COLOR="Red"]</div>[/COLOR]
<div class="block1"></div>

</body>
</html>

There’s probably a better way, but that’s one way to get the job done, anyhow. :slight_smile: