将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。脱离文档流的方式有浮动和定位。
css中定位用position属性。
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。元素的位置通过 "left","top","right"以及"bottom"属性进行规定。已脱离文档流，其它盒子会无视这个元素。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。相对于自己原来的位置偏移，一般用于微调，对后面的元素不造成位置影响。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。比如一些网站打开后的广告条一直处在网页右侧中部就是用fixed来定位的。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位</title>
<style type="text/css">
.div{
position: relative;
border:10px solid #ccc;
width: 500px;
height: 1000px;
}
.div1{
position: absolute;
left: 20px;
border:10px solid red;
width: 50px;
height: 50px;
}
.div2{
position: relative;
top: 10px;
border:10px solid green;
width: 50px;
height: 50px;
}
.div3{
position: fixed;
bottom: 50px;
right: 50%;
border:10px solid black;
width: 50px;
height: 50px;
}
.div4{
position: static;
border:10px solid blue;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="div">
<div class="div1">111</div> <!--相对于其父元素向左偏移了20px-->
<div class="div2">222</div> <!--相对于自己原本的位置向下偏移了10px-->
<div class="div3">333</div> <!--一直处于浏览器窗口的某一位置，自底部向上50px，离右侧50%的距离-->
<div class="div4">444</div> <!--位置无偏移，由于div2向下偏移了10px,所以div4的上边框被覆盖，这说明div4的层级比div2低，想要让div4将2覆盖，则可以通过z-index设置-->
</div>
</body>
</html>
网友评论