z-index

HTML bei beiden beispielen gleich!

<div id="block1_o">block 1</div> <div id="block2_o">block 2</div> <div id="block3_o">block 3</div>

ohne veränderung des z-index

block 1

block 2

block 3

/* fuer alle divs gleich! */
div.unit div {
	width:150px;
	height:150px;
	position: absolute;
	color:#fff;
	padding:3px;
}

/* bei rollover ganz nach vorne! */
div.unit div:hover {z-index:100;}

div#block1_o {
	background-color:red;
	top:70px;
	left:0;
}

div#block2_o {
	background-color:blue;
	top:95px;
	left:25px;
}

div#block3_o {
	background-color:green;
	top:120px;
	left:50px;
}

mit veränderung des z-index

block 1

block 2

block 3

/* fuer alle divs gleich! */
div.unit div {
	width:150px;
	height:150px;
	position: absolute;
	color:#fff;
	padding:3px;
}




div#block1_m {
	background-color:red;
	top:70px;
	left:0;
	z-index: 3
}

div#block2_m {
	background-color:blue;
	top:95px;
	left:25px;
	z-index: 2
}

div#block3_m {
	background-color:green;
	top:120px;
	left:50px;
}