@charset "utf-8";
/* CSS Document */
html, body {
width:100%;
height: 100%;
overflow: hidden;
}
#container {
top:0px;
height: 100%;
overflow: auto;
position: relative;
z-index: 1;
background-color:#FFFFCC;
}
#div1 {
position: absolute;
top:20%;
width:20%;
height:60%;
z-index: 2;
background-color:#FFFF99;
}
#div5 {
position: absolute;
top:20%;
width:60%;
height:60%;
z-index: 2;
left:20%;
background-color:#FF99CC;
}
#div2 {
top:0.5%;
position: absolute;
width:100%;
height:20%;
z-index: 3;
background-color:#CC3300;
}
#div3 {
position: absolute;
height:60%;
width:20%;
top:20%;
left:80%;
z-index: 2;
background-color:#FFFF99;
}
#div4 {
position: absolute;
top:80%;
width:100%;
height:20%;
z-index: 2;
background-color:#FFFF00;
}
... y aquí el html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Position:absolute en IE6 y Firefox</title>
<link href="css/ejemplo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
</div>
<div id="div1">div id=div1</div>
<div id="div2">div id=div2</div>
<div id="div3">div id=div3</div>
<div id="div4">div id=div4</div>
<div id="div5">div id=div5</div>
</body>
</html>
Espero que os sea de utilidad. Un saludo.
