CSS定位(position)详解
2017-05-17 本文已影响200人
dogs_five
本文主要介绍position定位的四种取值详细情形，分别是：
static：定位的默认值，无定位。
relative：相对定位，元素相对本身定位，不脱离文档流。
absolute：绝对定位。
1 如果其父级元素有定位，相对于父级元素进行定位，如果没有依次往上查找，都没有则相对于body定位。
2 行内元素绝对定位之后将具有行内块元素的特征。
3 绝对定位的元素脱离文档流。
4 绝对定位的优先级别大于浮动。
fixed：固定定位，相对于网页进行定位，脱离文档流。
定位主要考虑以下几个因素：
1: 定位元素的参照物
2: 定位元素是否脱离文档流
3: 影响定位元素位置的属性（top，left，right，bottom）
接下来，我们将通过代码一一展示上面所提到的取值对应的情形。
1：相对定位 relative
<style >
/* 相对定位: relative */
.big{
width: 200px;
background: green;
}
.small1{
background: red;
width: 100px;
height: 50px;
position: relative;
top: 70px;
}
.small2{
background: yellow;
width: 100px;
height: 50px;
}
</style>
</head>
<body >
<div class="big">
<div class="small1">我是相对定位</div>
<div class="small2">我是普通元素</div>
</div>
</body>
0 代码效果如图0:
0 relative效果对比图.png
结论0：通过图0可以看到：对红色div加了相对定位之后其位置相对于之前位置下移70px,刚好覆盖在黄色div上。因为不脱离文档流，因此其原本位置被空出来不会被黄色div占据。
2：绝对定位 absolute
<html >
<head >
<style >
.big{
width: 200px;
height: 200px;
background: gray;
position: relative;
}
.small1{
width: 100px;
height: 100px;
background: red;
position: absolute;
top:50px;
right: 50px;
}
.small2{
width: 120px;
height: 120px;
background: yellow;
}
</style>
</head>
<body >
<div class="big">
<div class="small1">绝对定位1</div>
<div class="small2">绝对定位2</div>
</div>
<span>行内元素</span>
</body>
</html>
1 代码效果图如图1：
1 父级有定位 .png
结论一：通过代码展示图1可以看出，当给红色div设置绝对定位之后，其原本位置被黄色div占据。说明绝对定位元素脱离了文档流。
2 将上述的.big选择器代码修改成如下代码，效果图如图2：
.big{
width: 200px;
height: 200px;
background: gray;
}
2 父级无定位.png
结论二： 通过图1，2可以看出，如果父级元素(灰色div)不加定位，那么红色div根据body(白色)定位，距离网页右边界50px。如果父级元素(灰色div)加定位，那么红色div根据灰色div定位，距离灰色div右边界50px。
3 在上述代码基础上加如下代码，效果图如图3：
/* 测试行内元素加完绝对定位的效果 */
span{
width: 200px;
height: 50px;
background: orange;
/* 同时设置浮动和定位 */
position: absolute;
float: right;
}
3 定位不浮动(定位右浮动)的span .png
结论三：通过图3可以看出，行内元素span在加完绝对定位之后，可以设置宽高，具有行内块元素的特征。
结论四： 通过图3可以看出，对span加完定位之后，其位置由定位决定，不会右浮动。因此，定位优先级别大于浮动。
3：固定定位 fixed
<html >
<head >
<meta charset="utf-8">
<style >
.a{
background: red;
width: 100px;
height: 100px;
position: fixed;
}
.b{
background: gray;
width:500px;
height: 1500px;
}
</style>
</head>
<body >
<div class="a">fixed定位元素</div>
<div class="b"></div>
</body>
</html>
通过上述代码我们可以发现，当我们向下滚动网页时，红色div不随网页的滚动而滚动。其相对于网页固定位置。
那么如图0所示，加了定位之后的元素会对其他元素进行覆盖，我们如何确定其层次关系？请见下章z-index详解。
