<div+css页面布局课堂笔记>4---与盒子相关的CSS属性

最新推荐文章于 2020-04-23 11:13:01 发布

Fuego801

最新推荐文章于 2020-04-23 11:13:01 发布

阅读量404

点赞数

本文链接：https://blog.csdn.net/Fuego801/article/details/50988002

版权

1.position属性：

绝对的位置：absolute 绝对位置，对于浏览器原点

相对位置：relative 相对按文档流应该存在的位置

固定的：fixed. 相对浏览器原点

2.z-index：

决定了谁在上层谁在下层。

3.Eg:

<!DOCTYPE html>
<style>
.one {
position:absolute;
left:200px;
top:200px;
width:100px;
height:100px;
border:2px solid blue;
padding:10px;
background:red;
z-index:1;
}
.two {
position:absolute;
left:100px;
top:100px;
width:100px;
height:300px;
border:2px solid blue;
padding:10px;
background:green;
z-index:1;
}
.three {
position:relative;
left:10px;
top:10px;
width:100px;
height:100px;
border:2px solid blue;
padding:10px;
background:blue;
z-index:2;
}
.four {
position:fixed;
left:0;
top:0;
width:100px;
height:100px;
border:2px solid blue;
padding:10px;
margin:100px;
background:#F2F;
z-index:1;
}
</style>

<body>
<div class="one">
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？
</div>
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
<div class="two">
我是谁？ 
我是谁？ 
<div class="three">
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？
</div>
我是谁？ 
我是谁？
</div>
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
<div class="four">
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？
</div>
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
我是谁？ 
</body>