DIV+css定位
请大家看看如下的定义及排出的结果：
代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<style>
#container {margin:0 auto; width:100%;background:#ff0000;}
#div1 { height:300px; width:100px; background:#9c6; margin-bottom:0px;}
#div2 { height:100px; width:100px; background:#0c6; margin-left:100px; margin-top:-300px;}
#div3 { height:50px; width:80px; background:#009c60;margin-left:100px; margin-top:0 }
#div4 { height:100px; width:100px; background:#00c600;margin-left:100px; }
#div5 { height:100px; width:200px; background:#c6ff00;margin-left:200px; margin-top:-250px; }
#div6 { height:200px; width:100px; background:#ffc600;margin-left:100px;margin-top:150px; }
#div8 { height:200px; width:100px; background:#ff00ff;margin-left:300px; margin-top:-350px;}
#div7 { height:200px; width:100px; background:#ffc600;margin-left:400px;margin-top:-300px;}
#header { height:100px; background:#9c6; margin-bottom:0px;}
#menu { height:20px; background:#693; margin-bottom:0px;}
#mainContent { background:url(bg.gif) 0 0 repeat-y; overflow:auto;zoom:1; margin-bottom:1px;}
#sidebar { float:left; width:200px;background:#cf9; height:auto !important; height:100px;}
#content { margin-left:205px !important; margin-left:202px; height:auto !important; height:100px; background:#ffa;}
#footer { height:60px; background:#9c6;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
</style>
</head>
<body>
<div id="container" >
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div8">div8</div>
<div id="div7">div7</div>
</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 379px; top: 245px" id="layer1">
</div>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<style>
#container {margin:0 auto; width:100%;background:#ff0000;}
#div1 { height:300px; width:100px; background:#9c6; margin-bottom:0px;}
#div2 { height:100px; width:100px; background:#0c6; margin-left:100px; margin-top:-300px;}
#div3 { height:50px; width:80px; background:#009c60;margin-left:100px; margin-top:0 }
#div4 { height:100px; width:100px; background:#00c600;margin-left:100px; }
#div5 { height:100px; width:200px; background:#c6ff00;margin-left:200px; margin-top:-250px; }
#div6 { height:200px; width:100px; background:#ffc600;margin-left:100px;margin-top:150px; }
#div8 { height:200px; width:100px; background:#ff00ff;margin-left:300px; margin-top:-350px;}
#div7 { height:200px; width:100px; background:#ffc600;margin-left:400px;margin-top:-300px;}
#header { height:100px; background:#9c6; margin-bottom:0px;}
#menu { height:20px; background:#693; margin-bottom:0px;}
#mainContent { background:url(bg.gif) 0 0 repeat-y; overflow:auto;zoom:1; margin-bottom:1px;}
#sidebar { float:left; width:200px;background:#cf9; height:auto !important; height:100px;}
#content { margin-left:205px !important; margin-left:202px; height:auto !important; height:100px; background:#ffa;}
#footer { height:60px; background:#9c6;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
</style>
</head>
<body>
<div id="container" >
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div8">div8</div>
<div id="div7">div7</div>
</div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 379px; top: 245px" id="layer1">
</div>
</body>
</html>
特别注意div1-8在container中出现的先后次序再对照定义，或许会有些感悟。
浙公网安备 33010602011771号