Css Layering z-index Issue

**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...

HTML 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>

Thread: Css Layering z-index Issue

Thread Tools

Search Thread

Css Layering z-index Issue

The Following User Says Thank You to simcomedia For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions