如何实现hover元素不挤压Flex容器内其他元素而是重叠覆盖？

解决方案 #

要实现hover时元素不挤压其他内容、仅做覆盖显示，核心是让触发显示的.child元素脱离正常文档流——你之前用的position: relative仍会占据文档空间，所以需要改成absolute定位，配合父级的相对定位控制位置：

修改后的CSS代码 #

.flex-container {
  display: flex;
  justify-content: space-evenly;
  flex: auto;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  line-height: 15px;
  font-size: 15px;
  border-radius: 10px;
  overflow: visible; /* 原hidden会裁剪absolute元素，需改为visible */
  position: relative;
}

.child {
  display: none;
  position: absolute; /* 脱离文档流，不再占据布局空间 */
  width: calc(100% - 20px); /* 匹配父容器边距，可按需调整 */
  left: 0;
  margin: 0 10px;
  z-index: 10; /* 确保覆盖在其他元素上方 */
}

.main:hover+.child {
  display: block;
  color: red;
  background-color: yellow;
}

关键修改说明 #

• 把.child的position从relative改为absolute：脱离文档流后，元素不再占用空间，自然不会挤压下方内容。
• 调整.flex-container>div的overflow为visible：原来的hidden会裁剪超出父容器的absolute元素，导致hover内容显示不全。
• 给.child设置宽度和位置：保证它的显示范围符合预期，避免偏移或超出父容器。

原HTML无需改动，直接使用即可 #

<div class="flex-container">
  <div class="wrapper">
    <p class="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <div class="child">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      </p>
    </div>
    <p class="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <div class="child">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      </p>
    </div>
    <p class="main">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </p>
    <div class="child">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
      </p>
    </div>
  </div>
  <div class="wrapper"></div>
</div>

为什么原来的z-index无效？ #

你之前用position: relative的.child仍处于正常文档流中，即便设置z-index，它的存在还是会占用空间，导致容器被撑开、下方元素被挤压。只有脱离文档流的定位（absolute/fixed）才能让元素不占据布局空间，此时z-index才能正常实现层级覆盖效果。

内容的提问来源于stack exchange，提问作者user13