position定位
**定位**:更高级的布局手段,所有元素都可以使用定位
通过浮动,外边距等都不能实现位置效果的时候,就使用定位
**取值**:
## static 默认值,没有设置定位
## relative:相对定位
偏移时参考位置:元素本身的初始位置
特点:
1.**不脱离**标准文档流
2.初始位置继续占用
3.会覆盖标准文档流里面的文本内容
## absolute:绝对定位
偏移时参考位置:离他最近的开启定位的祖先元素,如果没有祖先元素开启定位,参考变为body
特点:
1.margin:0 auto,水平居中和浮动没有效果
2.设置绝对定位的元素**脱离**标准文档流
3.原来位置不会继续占用,后面标准文档流中的兄弟元素上移
4.会覆盖标准文档流里面的文本内容
一般作为绝对定位的参考是是将祖先元素设置为相对定位
## fixed:固定定位,就是特殊的绝对定位
偏移时参考位置:浏览器视口
特点:
1.设置绝对定位的元素**脱离**标准文档流
3.原来位置不会继续占用,后面标准文档流中的兄弟元素上移
**定位元素**:position值非默认值static
**定位元素的偏移**:left 、right、top、bottom
## sticky: 粘性定位
可以做**吸顶效果**
参考位置:离父元素的距离,如果离父元素的距离与设置一致,就固定不动
特点:不脱离标准文档流,原先位置继续占有
# auto值的设置
**水平方向**:
left+margin-left+brder-left+padding-left+width+padding-right+border-right+margin-left+right=包含块内容宽度
margin-right
margin-left
width
left right top bottom
**1**.都是确定的数值时,和小于包含块的内容盒宽度,多余部分就被right吸收
**2**.只设置一个auto值:多余位置被设置auto的属性吸收
**3**.设置二个auto值:
3.1 margin-left margin-right 水平居中
3.2 manginleft/margin-right和left/right同时设置时,多余部分给left/right吸收
3.3 width和left/right同时设置auto时,多余部分给left/right吸收 3.4 left和right同时设置auto时,多余部分给right吸收**4**.设置三个值: 4.1有left/right,多余部分就给left/right吸收
4.2同时有left和right时,多余部分给right**5**.设置四个值: 5.1 有left/right,多余部分就给left/right吸收
**垂直方向**:
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块内容盒的高度
**同水平方向**
## z-index 定位的层级
z-index:50;
父子关系:想父元素在上面,就在子元素层级为**负值**