css 定位

来源：互联网发布：聚合数据类似的网站编辑：程序博客网时间：2024/05/16 15:05

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

*{margin: 0px;

padding:0px;}
body{
margin:20px;
}
#all{height:1200px;
width:500px;
/* position:absolute;*/
margin-left:20px;
margin:20px;
background-color:#eee;}

#fixed1,#fixed2,#fixed3,#fixed4,#fixed5{width:120px;

height:50px;

border:5px double #000;

position:absolute;}

#fixed1{top:0px;

left:0px;

background-color:#9c9;}

#fixed2{top:20px;

left:50px;

background-color:#9cc;}

#fixed3{bottom:10px;

left:50px;

background-color:#9cc;}

#fixed4{top:10px;

right:50px;

z-index:10;

background-color:#9cc;}

#fixed5{top:20px;

right:90px;

z-index:15;

background-color:#9c9;}

#a,#b,#c{width:300px;

height:100px;

border:1px solid #000;

background-color:#ccc;}

</style></head>

<body>

<div id="all" align="center">

<div id="fixed1">第1个固定的div容器</div>

<div id="fixed2">第2个固定的div容器</div>

<div id="fixed3">第3个固定的div容器</div>

<div id="fixed4">第4个固定的div容器</div>

<div id="fixed5">第5个固定的div容器</div>

<div id="a">第1个无定位的div容器</div>

<div id="b">第2个无定位的div容器</div>

<div id="c">第3个无定位的div容器</div>

</div>

</body>

</html>

运行效果：