css 定位

最新推荐文章于 2024-09-01 19:28:10 发布

weisljl

最新推荐文章于 2024-09-01 19:28:10 发布

阅读量358

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weisljl/article/details/8268781

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

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

运行效果：