山东企业网站建设公司网站推广优化平台
文章目录
- 场景
- 默认情况下，层叠顺序是如何工作的？
- 为什么 img 会覆盖 div？
- 解决方法
场景
<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