如何让两个div层完全重合无偏移，上层半透明透出底层背景图

问题根源 #

• 通用div样式的padding/margin规则会作用到所有div元素，导致父子元素默认盒尺寸计算逻辑不一致
• 给上层.lildiv7手动设置自定义padding、transform偏移属于硬凑数值，不同浏览器渲染、字号变化时都会出现偏移
• 绝对定位的子元素没有设置定位边界，默认位置会受父元素内边距、自身内容尺寸干扰

修正方案 #

直接让绝对定位的子元素完全铺满父元素，不需要手动调整偏移数值，适配所有场景：

1. 全局开启border-box盒模型，避免内边距、边框撑大元素尺寸
2. 给上层.lildiv7设置top/right/bottom/left全为0，自动贴合父元素四周边界
3. 移除多余的padding、transform硬编码属性，文字居中改用flex布局实现

修正后CSS代码 #

/* 全局统一盒模型，避免尺寸计算偏差 */
* {
  box-sizing: border-box;
}
div {
  padding: 30px 0px;
  margin: 20px 150px;
  text-align: center;
}

.div7 {
  position: relative;
  color: #000;
  background-image: url("gradients.jpg");
}

.lildiv7 {
  position: absolute;
  /* 四个方向定位全设0，直接铺满父元素 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(238, 174, 202);
  background: linear-gradient(90deg, rgba(238, 174, 202, 1) 9%, rgba(170, 163, 203, 1) 44%, rgba(167, 190, 200, 0.010723039215686292) 74%, rgba(122, 153, 190, 0.137) 100%);
  margin: 0;
  padding: 0;
  /* 文字垂直水平居中，不需要靠padding撑 */
  display: flex;
  align-items: center;
  justify-content: center;
}

修正后HTML代码 #

<div>
  <div class="div7">
    <div class="lildiv7">transparency</div>
  </div>
</div>

效果验证 #

修改后上层渐变半透明层会完全覆盖父元素.div7，尺寸和位置100%匹配，不会再出现边框错位的问题，同时可以正常透出下层的背景图片。

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