如何在嵌套div覆盖父元素时隐藏父元素被遮挡的边框

开发者阿泽

2026-10-2

实现方案

你可以通过统一背景定位基准、遮盖父元素溢出边框的方式实现需求，修正后核心逻辑如下：

移除嵌套div继承的边框属性，避免多余边框显示
给嵌套div配置和全局背景完全一致的参数，同时统一使用background-attachment: fixed让所有背景都相对于视口定位，不管元素位置、尺寸如何，背景图案都能完全对齐，滚动、窗口缩放也不会错位
给嵌套div设置高于父元素的层级，确保可以覆盖父元素的边框区域

修正后完整CSS代码

.background {
  height: 100%;
  background-size: 24px 24px;
  background-color: midnightblue;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 1px, transparent 2px, transparent 100%);
  min-height: 100vh;
  background-attachment: fixed;
  width: 100vw;
  position: relative;
}

.block {
  height: 300px;
  width: 400px;
  position: absolute;
  left: 29%;
  top: 29%;
  border: solid 2px white;
  border-radius: 16px;
  margin-left: 100px;
  background: transparent;
}

.nested {
  height: 200px;
  left: 25%;
  top: 20%;
  border: none;
  background-size: 24px 24px;
  background-color: midnightblue;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 1px, transparent 2px, transparent 100%);
  background-attachment: fixed;
  z-index: 2;
}