【基础知识】html布局之三-定位position

定位=定位模式+边偏移

定位模式是指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置。

定位模式：

通过CSS的position四个值属性设置。

静态定位：position:static;

默认定位，无定位的意思，无边偏移。

相对定位：position:relative;

1、相对原来的位置移动（参照点是自己原来的位置）

2、原来的标准流位置继续占用，后面的盒子仍以标准的方式对待它（灵魂出窍）。

3、最典型的应用是给绝对定位当爹。。。

绝对定位：position:absolute;

1、如果没有祖先元素或者祖先元素没有定位，则已浏览器为准定位（Document文档），

2、如果祖先元素有定位（相对、绝对、固定），则以最近一级的有祖先定位元素为参考点移动位置。

3、绝对定位不占用原位置，脱离标准流。

“子绝父相”最常用，指的是子级是绝对定位（不需要占位），父级要用相对定位（需要占位）。

固定定位：position:fixed;

1、以浏览器的可视化窗口为参照点。

2、和父元素无关，不随着滚动条滚动。

3、不占用原先位置，脱离标准流，可以看做是特殊的绝对定位。

粘性定位：position:sticky;（了解即可，兼容性差，IE不支持）

1、易浏览器的可视窗口为参照点滚动（固定定位特点）。

2、粘性定位占有原来的位置（相对定位特点）。

3、必须添加边偏移top、bottom、left、right中的一个才有效果。

边偏移：

有top、bottom、left、right四个属性。

总结：

参考：https://www.bilibili.com/video/BV14J4114768?p=233