css四种定位方式

目录

1、static（静态定位，默认设置）

2、relative（相对定位，图层不可嵌套）

3、absolute（绝对定位，与位置属性配合使用）

4、fixed（固定定位）

---

1、static（静态定位，默认设置）

块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

2、relative（相对定位，图层不可嵌套）

使用相对定位Relative进行定位时，原本该元素占据的空间位置不变，以“原本该元素”的左上位置为中心点，根据设置的left和top进行位置的偏移。设置为相对定位的元素框会偏移某个距离，元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

3、absolute（绝对定位，与位置属性配合使用）

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。

定位为absolute的层脱离正常文档流，但与relative的区别是其在正常流中的位置不再存在。

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

1）如果没有TRBL(top、right、bottom、left)，以父级的左上角，在没有父级的时候，参照浏览器左上角。

2）如果设定TRBL，并且父级没有设定position属性（position:static;不算设定了属性），那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。

3）如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由 TRBL决定。即使父级有Padding属性，对其也不起作用。

4、fixed（固定定位）

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。可通过z-index进行层次分级。