[分享]css两个div重叠并排

在CSS中，要想实现两个div重叠并排的效果，通常需要使用到 属性和 zindex 属性。首先，我们需要将两个div的 属性设置为 absolute 或 fixed，来让它们脱离文档流并可以自由定...

在CSS中，要想实现两个div重叠并排的效果，通常需要使用到 position 属性和 z-index 属性。

首先，我们需要将两个div的 position 属性设置为 absolute 或 fixed，来让它们脱离文档流并可以自由定位。其次，我们可以通过 left 和 top 属性来精确设置每个div的位置。如果希望两个div在水平方向上并排，我们可以将其中一个div的 left 属性设置为一个具体数值，另一个div的 left 属性则需要相应地调整。

div {
  position: absolute;
  top: 0;
}

#div1 {
  left: 0;
  z-index: 1;
}

#div2 {
  /* 需要根据div1的宽度来调整left值 */
  left: 100px;
  z-index: 2;
}

此外，我们还可以使用 z-index 属性来控制两个div的层级关系。通常情况下，z-index 值越大的元素会覆盖在 z-index 值较小的元素上方。我们可以为每个div设置不同的 z-index 值，来实现它们之间的层级关系。

div {
  position: absolute;
  top: 0;
}

#div1 {
  left: 0;
  z-index: 1;
}

#div2 {
  /* 需要根据div1的宽度来调整left值 */
  left: 100px;
  z-index: 2;
}

最后，需要注意的是，使用 position 属性和 z-index 属性时，需要注意页面布局的影响，尤其是当多个元素同时使用这些属性时，可能会出现布局混乱、元素重叠等问题。因此在使用这些属性时需要慎重考虑，对于复杂页面布局，建议使用其他布局技术（如flex布局、grid布局等）来代替。