定位
定位:手动控制元素在包含块中的精准位置。
涉及的CSS属性:position。
position属性
- 默认值:static ,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素。
定位元素会脱离常规流(文档流),相对定位除外。
一个脱离文档流的元素:
- 文档流中元素摆放时,会忽略脱离了文档流的元素。
- 文档流中元素计算高度是,会忽略脱离了文档流的元素。
相对定位 relative
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移。
可以通过四个CSS属性,设置其位置:
- left
- right
- top
- bottom
四个属性都为,离包含块上下左右的距离。
盒子的偏移不会对其它盒子造成任何影响。
绝对定位 absolute
- 盒模型尺寸:默认宽高为auto,尺寸适应内容
- 包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块。若找不到,则它的包含块为整个网页(初始化包含块).
属性同样可以设置:
- left
- right
- top
- bottom
固定定位 fixed
其他情况与绝对定位完全一致。
包含块不同:固定位视口(浏览器的可视窗口)。
定位下的居中
- 定宽(高)
- 将左右(上下)距离设置为0
- 将左右(上下)margin设置为auto。
绝对定位的固定定位中,margin为auto时,会自动吸收剩余空间。
满屏的视觉效果:
width:100px;
height:100px;
position: fixed;
left:0;
right:0;
margin:auto;
多个定位元素重叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户。
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素,则会被其覆盖。
补充
- 绝对定位、固定定位元素一定是块盒。
- 绝对定位、固定定位元素一定不是浮动。
- 没有外边距合并。