如何使 img 覆盖父 div - CSS

有时候，在开发网页时，我们希望图片能够覆盖在父级 div 上，但是默认情况下，图片是插入在 div 中的，如何改变这种情况呢？本文将介绍如何使用 CSS 实现图片覆盖在父级 div 上。

方法一：使用绝对定位

将图片的 position 属性设置为 absolute，可以使图片覆盖在父级容器上。同时，父级容器的 position 属性也需要设置为 relative，这样可以使图片相对于父级容器定位。

.parent{
  position: relative;
}

img{
  position: absolute;
  top: 0;
  left: 0;
}

以上代码将图片定位在父级容器的左上角。

方法二：使用 z-index

将图片的 position 属性设置为 absolute，并为其设置一个很大的 z-index 属性值可以使图片覆盖在父级容器上。

img{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

以上代码将图片定位在父级容器的左上角，并覆盖在其上面。

方法三：使用负边距

将图片的 position 属性设置为 relative，并为其设置一个负的 margin 值，可以使图片覆盖在父级容器上。

.parent{
  position: relative;
  overflow: hidden; /* 防止图片溢出 */
}

img{
  position: relative;
  margin-left: -20px;
  margin-top: -20px;
}

以上代码将图片相对于其原始位置向左移动 20 像素、向上移动 20 像素，并覆盖在父级容器上面。

以上三种方法都可以使图片覆盖在父级容器上，具体使用哪种方法则取决于具体的业务场景。