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

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

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

效果：

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

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

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

效果：

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

三、解决实现重叠效果时 div 背景被遮挡问题方法一、div 设置 position: relative;

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

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

效果：

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

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

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

效果：

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

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

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

效果：

作者：飞仔FeiZai

出处：https://www.cnblogs.com/yuzhihui/p/17246928.html

声明：欢迎任何形式的转载，但请务必注明出处！！！