css中position叠加

position属性用于指定元素在文档中的定位方式。position属性有四个取值：static、relative、absolute和fixed。其中，relative、absolute和fixed是可以叠加的。

当一个元素的position属性值为relative时，它的定位是相对于它在文档流中的正常位置进行的。通过设置top、bottom、left和right属性，可以相对于它的正常位置进行偏移。示例代码如下：

.relative {
  position: relative;
  top: 20px;
  left: 50px;
}

当一个元素的position属性值为absolute时，它的定位是相对于最近的已定位祖先元素进行的。如果不存在已定位的祖先元素，则相对于文档的初始包含块进行定位。通过设置top、bottom、left和right属性，可以相对于定位的祖先元素进行偏移。示例代码如下：

.absolute {
  position: absolute;
  top: 50px;
  left: 100px;
}

当一个元素的position属性值为fixed时，它的定位是相对于浏览器窗口进行的。通过设置top、bottom、left和right属性，可以相对于浏览器窗口进行偏移。示例代码如下：

.fixed {
  position: fixed;
  top: 0;
  right: 0;
}

当一个元素同时设置了relative和absolute或fixed时，可以实现相对于已定位祖先元素的绝对定位。这种情况下，元素的定位是相对于已定位祖先元素进行的，而不是相对于文档流中的正常位置进行的。示例代码如下：

.relative-absolute {
  position: relative;
}
.relative-absolute .absolute-child {
  position: absolute;
  top: 50px;
  left: 100px;
}

在上述示例代码中，`.relative-absolute`元素设置了position为relative，然后内部的`.absolute-child`元素设置了position为absolute。`.absolute-child`元素的定位是相对于`.relative-absolute`元素进行的。

需要注意的是，当一个元素设置了absolute或fixed时，它会脱离文档流，并且不再占据原有的空间。这可能会导致其他元素的位置发生变化。在使用absolute或fixed定位时，需要注意页面布局的影响。

除了上述叠加的情况，position属性还可以与z-index属性一起使用，用于控制元素的堆叠顺序。z-index属性指定了一个元素的堆叠级别，具有较高z-index值的元素会覆盖具有较低z-index值的元素。示例代码如下：

.high-z-index {
  position: absolute;
  z-index: 9999;
}
.low-z-index {
  position: absolute;
  z-index: 1;
}

在上述示例代码中，`.high-z-index`元素的堆叠级别较高，会覆盖`.low-z-index`元素。

总结一下，position属性的叠加可以通过设置relative、absolute和fixed来实现相对定位和绝对定位的叠加。通过设置z-index属性，还可以控制元素的堆叠顺序。在使用这些属性时，需要注意页面布局的影响，以及避免出现意外的覆盖效果。