css position- absolute、relative详解

今天我在研究CSS定位时，对`position: absolute`和`position: relative`这两个属性有了更深入的理解。

在CSS2.0的HandBook中，关于这两个属性的解释非常详尽。设置元素的`position`属性为`absolute`时，该元素会被移出正常的文档流，仿佛它与其他元素不在一个层面。即使有其他元素占据了相同的位置，它们也不会相互影响，而是会在同一位置层叠。元素的外补丁（margin）无效，但内补丁（padding）和边框（border）仍然存在。要想激活元素的绝对定位，必须至少设置`left`、`right`、`top`或`bottom`中的一个值。否则，元素会遵循正常的HTML布局规则。值得注意的是，当元素的父级也设置了`position`属性时，该元素的绝对定位会以父级左上角为基准。

另一方面，当设置`position: relative`时，元素仍然保持在正常的文档流中。它的位置会根据其前一个元素进行偏移。这意味着相对定位的元素可以根据需要相对于其最近的父级或BODY元素进行定位。相对定位的元素仍然占据其原始空间，即使它被移动，也会覆盖其他框。这一点与绝对定位不同，绝对定位的元素不会因分辨率的变化而改变位置。

使用`z-index`可以设定元素的堆叠顺序。数值越大，元素越在上面。但要注意，父子关系不能用`z-index`来设定上下关系。对于网页居中问题，使用绝对定位时需要注意浏览器窗口分辨率的变化，因为绝对定位的位置不会随之变化。而相对定位则可以根据需要进行微调。

为了更好地理解这两个属性，我创建了一个简单的HTML结构进行演示：

```html

```

从实际展示效果来看：

1. 相对定位（`rel`）的层会占用一行，而绝对定位（`abs`）的层则会在下一行显示或与后面的层重叠。

2. 默认情况下，绝对定位的层会以最近的已定位父层为基准进行定位。如果不结合其他定位属性，其显示位置会随父级位置变化。

3. 当结合`top`、`bottom`、`right`、`left`等属性时，绝对定位会以浏览器窗口为基准进行定位，而相对定位则基于自身的占位进行偏移。

今天终于搞清楚了这些概念，虽然一开始有些混淆，但通过实践和深入理解，总算是有了一些收获。在实际应用中，需要根据具体需求选择合适的定位方式。在网页设计中，CSS定位属性扮演着至关重要的角色。让我们深入一下关于position属性的几个层级及其产生的交互效果。

设想一下，我们有这样一个页面结构：