山东食品行业网站模板,百度广告联盟电话,温州关键词优化工具,友情链接模板文章目录 场景默认情况下#xff0c;层叠顺序是如何工作的#xff1f;为什么 img 会覆盖 div#xff1f;解决方法 场景
img srcimage.jpg
divContent/div有代码如上#xff0c;img src是一个https网络图片链接。 若div的margin-top为… 文章目录 场景默认情况下层叠顺序是如何工作的为什么 img 会覆盖 div解决方法 场景
img srcimage.jpg
divContent/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
