CSS position属性
position属性用来规定元素的定位类型，一共有如下几种取值：
| 值 | 描述 |
|---|---|
| absolute | 绝对定位，相对于position属性为static定位以外的祖先元素进行定位。如若没有定位过的祖先，则相对于文档左上角的位置进行定位。此时元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性来规定。 |
| relative | 相对定位，相对于其正常位置进行定位。即相对于原来的自己进行移动，原来的位置则空在那不会被别的元素占用 |
| static | 该值是默认值。表示没有定位，元素出现在正常的流中。此时top, bottom, left, right 或者 z-index都不起作用。 |
| fixed | 也表示绝对定位，但是是相对于浏览器窗口进行定位。 |
absolute属性：采用该值进行绝对定位的元素不会被预留空间，脱离文档流，可以设置外边距，且不会与其他边距进行合并的。该元素相对于非static祖先元素进行定位，当祖先元素设置了margin、padding等值时，相对于祖先元素的padding开始点即从padding的左上角开始定位。并且也会对该元素的兄弟元素位置造成影响，因为此时相当于把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，并且还会覆盖下层的元素。并且该元素将变为块级元素且元素的宽度由原来的100%变为了 auto。
relative属性： 根据给定的top，left等值相对于自身的位置进行偏移。当left和right同时存在，仅只有left有效，当top和bottom同时存在仅只有top有效。若设置了margin，padding等值时则相对于margin左上角进行偏移。
fixed属性： 特殊的absolute属性，只相当于body进行偏移。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color: #eee;
}
#div2{
width:100px;
height:100px;
background-color: #555;
}
</style>
</head>
<body>
<div id="main">
<div id="div1">div1</div>
<div id="div2">div2</div>
</div>
</body>
</html>
此时若将div1的样式改为如下，则效果图如下所示：
#div1{
width:100px;
height:100px;
background-color: #eee;
position:absolute;
top:50px;
left:50px;
}
从图片可以看出，absolute定位的元素脱离了文档流。
此时若将div2的样式改为如下，则效果图如下所示：
#div1{
width:100px;
height:100px;
background-color: #eee;
}
#div2{
width:100px;
height:100px;
background-color: #555;
position:relative;
top:20px;
left:20px;
}
relative定位的元素总是相对于自身进行偏移。
将css样式设置为如下：
#div1{
width:100px;
height:100px;
background-color: #eee;
}
#div2{
width:100px;
height:100px;
background-color: #555;
position:absolute;
top:50px;
left:50px;
}
#main{
margin-left:100px;
margin-top:100px;
padding:20px;
border:1px solid black;
position:absolute;
}
可见将父元素设置为absolute之后，子元素设置为absolute属性就是相对于父元素的padding左上角进行定位了。并且块级元素设置了absolute之后，宽度从100%变成了auto。
当设置css样式如下：
#div1{
width:100px;
height:100px;
background-color: #eee;
border:1px solid black;
margin-top:50px;
margin-bottom:50px;
}
#div2{
width:100px;
height:100px;
background-color: #555;
border:1px solid red;
margin-top:50px;
}效果图为：
可见此时两个div的外边距是会合并的；
当设置div2的position属性为absolute时，再设置div2的外边距则不会与别的元素外边距进行合并，如下所示：
#div1{
width:100px;
height:100px;
background-color: #eee;
border:1px solid black;
margin-top:50px;
margin-bottom:50px;
}
#div2{
width:100px;
height:100px;
background-color: #555;
border:1px solid red;
margin-top:50px;
position:absolute;
}上一篇： position：sticky