Css Layering z-index Issue [Archive]

gurumvg

01-19-2010, 11:46 AM

Hi,

I have an issue with the layering, Please have a look at the below code and all i need is 'Three' Div should be stacked over (on top of) 'Five' Div.

I don't want to change the (inline) z-index of parent div (first DIV in DOM).

Here is the code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>

Div test

</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}

/* generic style */
div.tile {
position: absolute;
border: 1px solid black;
background: white;
width: 4em;
height: 4em;
}

/* box One */
.a {
top: 0;
left: 0;
}

/* box Two */
.b {
top: 1em;
left: 1em;
}

/* box Three */
.c {
top: 2em;
left: 2em;
z-index: 3;
}

/* box Four */
.d {
top: 3em;
left: 3em;
}

/* box Five */
.e {
top: 4em;
left: 4em;

}
</style>
</head>

<body>
<div style="position: absolute; z-index: 0;">
<div class="tile a">One</div>
<div class="tile b">Two</div>
<div class="tile c">Three</div>
<div class="tile d">Four</div>
</div>

<div class="tile e">Five</div>

</body>

</html>

Thanks in Advance...

simcomedia

01-22-2010, 11:39 PM

Put the 'five' div inside the container div with the rest. The div's inside are relative to the container div they reside in.

<div style="position: absolute; z-index: 0;">
<div class="tile a">One</div>
<div class="tile b">Two</div>
<div class="tile c">Three</div>
<div class="tile d">Four</div>
<div class="tile e">Five</div>
</div>