一、概念
普通流就是 html 文档中的元素如块级元素、行内元素依据他们的显
示属性按照在文档中的先后次序依次显示。
二、定位机制
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。 除非专门
指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的
位置由元素在 (X)HTML 中的位置决定。
三、定位分类
默认值为 static。可应用于所有元素。 (position:static) static
元素框正常生成:块级元素生成一个矩形框,作为文档流的一部分,
行内元素则会创建一个或多个行框,置于其父元素中。
1.相对定位
- position:relative
- 相对定位,如果没有偏移量(left/right/top/bottom)就是正
常显示; - 根据原来的位置进行偏移
- 不会使元素脱离文本流
2.绝对定位
- position:absolute
- 如果使用绝对定位,有定位祖先元素就相对于定位祖先元素发生偏
移,没有定位祖先元素就会相对于整个文档发生偏移(绝对 相对 固
定) - 使元素脱离文档流和文本流
3.固定定位
- position:fixed
- 相对于整个窗口进行定位,不会受滚动条影响
- 使元素脱离文档流和文本流
4.粘性定位
- position:sticky
- sticky:(这是 css3 新增的属性值)粘性定位。最初会被当作是
relative,相对于原来的位置进行偏移;一旦超过一定阈值之后,会
被当成 fixed 定位,相对于视口进行定位
四、z-index
使用z-index 设置元素的堆叠顺序。