CSS 中相对定位(relative)与绝对定位(absolute)的详解

Posted 2022-01-04 路宇

position:relative 相对定位详解

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。

相对定位的特点：

1. 它是相对于自己原来的位置来移动的(移动位置的时候参考点是自己原来的位置)
2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方对待它(不脱标，继续保留原来的位置)。因此相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。

position:absolute 相对定位详解

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的（拼爹型）。

绝对定位的特点：

1. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位(Document文档)
2. 如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
3. 绝对定位不再占有原有的位置(脱标)。

下面讲解子绝父相的由来和具体使用：

子绝父相的意思是指：子级是绝对定位的话，父级要用相对定位。

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个位置，不会影响其他的兄弟盒子。
2. 父盒子需要加定位限制子盒子在父盒子内显示。
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有定位，则是绝对定位。