4---与盒子相关的CSS属性

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">
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?
</div>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
<div class="two">
我是谁?<br>
我是谁?<br>
<div class="three">
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?
</div>
我是谁?<br>
我是谁?
</div>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
<div class="four">
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?
</div>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
我是谁?<br>
</body>

你可能感兴趣的:(4---与盒子相关的CSS属性)