CSS 实现重叠效果时，div 背景被 img 图片遮挡

CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡

一、未实现重叠效果

<body>
  <img
    src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
    style="width: 375px;"
    alt=""
    srcset=""
  />

  <div style="width: 375px;height: 80px;background: green;">
    <p style="text-align: center;color: #fff;">
      CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡
    </p>
  </div>
</body>

效果：

img

二、实现重叠效果，但 div 背景被遮挡

通过将 div margin-top 设为负值实现 div 部分重叠在 img 图片上。

<body>
  <img
    src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
    style="width: 375px;"
    alt=""
    srcset=""
  />

  <div style="width: 375px;height: 80px;background: green; margin-top: -50px;">
    <p style="text-align: center;color: #fff;">
      CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡
    </p>
  </div>
</body>

效果：

img

由效果图可知，存在 div 的绿色背景被遮挡问题，这时如果通过z-index来设置层叠顺序是无效的。

三、解决实现重叠效果时 div 背景被遮挡问题

方法一、div 设置 position: relative;

通过将 div 设置为 position: relative; 解决实现重叠效果时 div 背景被遮挡问题。

<body>
  <img
    src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
    style="width: 375px;"
    alt=""
    srcset=""
  />

  <div
    style="width: 375px; height: 80px; background: green; margin-top: -50px; position: relative;"
  >
    <p style="text-align: center;color: #fff;">
      CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡
    </p>
  </div>
</body>

效果：

img

方法二、div 设置 display: inline-block;，并设置父容器宽度

<body style="width: 375px;">
  <img
    src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
    style="width: 375px;"
    alt=""
    srcset=""
  />

  <div
    style="width: 375px;height: 80px;background: green; margin-top: -50px; display: inline-block;"
  >
    <p style="text-align: center;color: #fff;">
      CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡
    </p>
  </div>
</body>

上述代码中，同时设置了父容器 body 的宽度和 div 的 display: inline-block;。

效果：

img

方法三、div 设置position: absolute; top: 100px;，并去除margin-top: -50px;，同时设置父容器position: relative;

<body style="position: relative;">
  <img
    src="https://cdn.uviewui.com/uview/swiper/swiper2.png"
    style="width: 375px;"
    alt=""
    srcset=""
  />

  <div
    style="width: 375px;height: 80px;background: green; position: absolute; top: 100px;"
  >
    <p style="text-align: center;color: #fff;">
      CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡
    </p>
  </div>
</body>

上述代码中，同时设置父容器 body 的position: relative;和 div 的position: absolute; top: 100px;，并去除了 div 的margin-top: -50px;。

效果：

img

posted @ 2023-03-23 12:22  飞仔FeiZai  阅读(965)  评论(0)  编辑  收藏  举报