文档流
所有文档流就是按照元素的顺序,从左到右,由上而下的方式排列
定位
默认的文档流很多时候不能满足我们的布局需求,需要更丰富的布局手段
这时候我们需要定位。定位分为:relative、absolute、fixed、static。
Static 静态定位(默认)
无定位,元素正常出现了流中,不受left、right、top、bottom属性的影响
relative相对定位
相对定位是从原有的位置根据left、top进行位移,而且不影响后续元素的位置。
absolute绝对定位
父相子绝:孩子绝对定位 父亲设置相对定位 否则会一直往上找
fixed固定定位
固定定位脱离文档流,并相对窗口进行偏移
z-index
重新定位之后可能出现重叠,我们可以通过z-index调整其顺序,z-index默认值为auto
即与父元素相同,可能设置数值,数值大的层位相对于小的上方。
定位总结
- 标准的文档流按照从左到右,自上而下的方式依次排列元素。若要改变默认布局则需使用定位:relative absolute fixed 等定位方式
- Relative是相对于其原有位置进行偏移
- Absolute是相对于父容器进行偏移,注意父容器必须是有定位的,即非默认(static)的定位方式,否则会一直往上追溯,直到页面。
- Fixed定位是相对于整个页面进行偏移
- Relative不会从标准流中脱离,而absolute和fixed都从标准中脱离出来。