position基本属性
| 值 |
属性 |
| inherit |
规定应该从父元素继承 position 属性的值。 |
| static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
, |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 left位置添加 20px。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| sticky |
CSS3新属性，表现类似position:relative和position：fixed的合体，在目标区域在屏幕可见时，他的行为就像position:relative；而当页面滚动超出目标区域，他的行为就像position：fixed。 |
定位机制
- 普通流。默认定位方式，在普通流中元素框的位置由元素在html中的位置决定。其中position:static和position:relative属于普通流的定位方式
- 浮动定位
- 绝对定位。包括absolute和fixed
absolute和fixed
- 绝对定位使元素与文档流无关，也不占据文档流空间。普通元素布局就像绝对元素不存在一样
<div style="height:100px;width:100px;background-color:red;"></div>
<div style="height:100px;width:100px;background-color:green;position:absolute;"></div>
<div style="height:100px;width:100px;background-color:yellow;"></div>
- 绝对定位的元素位的是相对于距离最近的非static祖先元素位置绝当的。如果元素没有已定位的祖先元素，那么他的位置就相对于初始包含块html来定位。
<div style="margin-top:100px;border:1px solid pink; width:400px;">
<div style="height:100px;width:100px;background-color:red;"></div>
<div style="height:100px;width:100px;background-color:green;position:absolute;top:20px;left:20px"></div>
<div style="height:100px;width:100px;background-color:yellow;"></div>
</div>
// 给父元素加上position:relative
<div style="margin-top:100px;border:1px solid pink; width:400px;position:relative">
<div style="height:100px;width:100px;background-color:red;"></div>
<div style="height:100px;width:100px;background-color:green;position:absolute;top:20px;left:20px"></div>
<div style="height:100px;width:100px;background-color:yellow;"></div>
</div>
- 绝对定位的元素可以覆盖页面上的其他元素。可以通过z-index属性控制叠放顺序。
- fixed 固定定位，是绝对定位的一种。差异：固定元素的包含块儿是视口（viewport）
- 绝对定位宽度是收缩的，若想撑满父容器，可以设置width:100%。该属性使content等于父content宽度
- 行内元素增加绝对定位或浮动。会拥有块级元素特性
绝对定位元素居中
// 方式一
.center{
position:absolute;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-50px;
}
// 方式二
.center{
position:absolute;
top:calc(50% - 50px);
left:calc(50% - 50px);
}
// 方式三
.center{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}
