子div遮罩异常问题：如何实现父元素50%宽100%高的overlay？

嘿，我来帮你排查下代码里的问题，你要的是文本后方出现宽度为.parent一半的白色遮罩，现在的代码有几个明显的小错误：

1. 重复的width属性直接覆盖了你的设置 #

看你的.overlay样式：

.overlay { 
  width: 50%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; /* 这里把上面的50%直接覆盖了！ */
  background-color: rgba(255, 255, 255, 0.8); 
}

后面写的width:100%会完全覆盖前面的width:50%，这是第一个要改的地方。

2. 定位参考对象错了，高度也没设置 #

• 你给.child加了position:relative，所以.overlay是相对于.child定位的，但你要的是相对于.parent的50%宽度，这就不对了。
• 另外，.parent的高度是靠padding:100px 0撑开的，.child的height:100%在父元素高度为auto的情况下根本不生效，而.overlay又没设置height，所以它默认高度是0，自然看不到。

修正后的完整代码 #

我调整了代码，完美实现你要的效果：

HTML（和你原来的一样，不用改） #

<div class="parent"> 
  <div class="child"> 
    <div class="overlay"></div> 
    <h1>Title</h1> 
  </div> 
</div>

CSS #

.parent { 
  padding: 100px 0; 
  background: black; 
  position: relative; /* 把定位参考改成parent */
}
.child { 
  width: 100%; 
  padding: 0 50px; 
  position: relative; 
  z-index: 1; /* 确保文本在遮罩上面 */
}
.child h1{ 
  color: red; 
}
.overlay { 
  width: 50%; 
  height: 100%; /* 填满parent的高度 */
  position: absolute; 
  top: 0; 
  left: 0; 
  background-color: rgba(255, 255, 255, 0.8); 
}

关键调整说明 #

• 给.parent加上position:relative，这样.overlay就会相对于.parent定位，width:50%就是你要的父元素一半宽度。
• 给.overlay设置height:100%，因为它是绝对定位，会自动匹配.parent的高度（包括padding撑开的部分）。
• 给.child加z-index:1，防止遮罩把文本盖住，确保标题能正常显示在遮罩上方。
• 删掉了.child里无效的height:100%，以及.overlay里重复的width:100%。

这样改完之后，就能看到你想要的白色半透明遮罩啦！

内容的提问来源于stack exchange，提问作者Freddy