【css】设置了margin-top为负数，div被img覆盖的解决方法

场景

<img src="image.jpg"> 
<div>Content</div>

有代码如上，img src是一个https网络图片链接。
若div的margin-top为负数，img会覆盖div。

默认情况下，层叠顺序是如何工作的？

默认情况下，CSS 的层叠顺序（z-index）是由元素在 HTML 中的出现顺序决定的：

• 后出现的元素会覆盖先出现的元素。
• 如果两个元素没有设置 z-index，那么它们的层叠顺序完全取决于 HTML 中的顺序。

即：后面的会覆盖前面的。

为什么 img 会覆盖 div？

经过实践，实际上是img会覆盖div。

因为图片加载的延迟：

• 如果 img 的加载速度较慢，它可能在页面布局完成后再显示出来。
• 在图片加载完成之前，div 已经占据了页面上的某个位置。
• 当图片加载完成后，它就覆盖在div上。

解决方法

给div设置：

position: relative;

原理：

默认情况下，一个元素没有z-index。设置了position: relative;后，这个元素有了z-index:auto。

给div设置position: relative;，z-index:auto就在没有z-index 上了。

若给img也设置：

position: relative;
z-index: 1;

则img覆盖div。因为 z-index: 1; > z-index:auto