00定位设置
<!--
定位:更高级的布局手段,所有的元素都可以使用定位
通过浮动,外边距等都不能实现位置效果的时候,就使用定位
-->
<!--
属性:
position
取值:static(默认值,没有设置定位)
相对定位:relative
参考位置:元素本身初始位置
特点:不脱离标准文档流
绝对定位:absolute
参考位置:离他最近的开启定位的祖先元素,一般情况祖先元素开启的是相对定位
特点:脱离标准文档流
固定定位:fixed
参考位置:浏览器视口
特点:脱离标准文档流
-->
<!--
定位元素:position值非默认值static
定位元素的偏移:left bottom top right
-->
1.粘滞定位
<!--
粘滞定位:
sticky
参考位置:离父元素的距离,如果离父元素的距离与设置一致,就固定不动
特点:不脱离标准文档流,原先位置继续占有
-->
2.绝对定位
<!--
绝对定位在包含块(参考位置的元素)水平布局
水平方向:
left+margin-left+brder-left+padding-left+width+padding-right+border-right+margin-left+right=包含块内容宽度
可以设置auto:margin-left margin-right width left right
1.都是确定的数值时,和小于包含块的内容盒宽度,多余部分就被right吸收
2.只设置一个auto值:多余位置被设置auto的属性吸收
3.设置二个auto值:
3.1 margin-left margin-right 水平居中
3.2 marginleft/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吸收
5.2 同时有left和right时,多余部分给right
6. 设置五个值:
多余部分给right
-->
<!-- 垂直方向:
top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块内容盒的高度
同水平方向
-->
3.层级
<!--
设置定位元素的层级关系 z-index
默认定位元素的初始层级为0
同级的定位元素,后面的会覆盖前面的
-->