如何在不使用z-index的情况下让DIV显示后方背景及元素

需求：在div.box1内部嵌套div.box2，希望box1呈现窗口效果，透过它显示div.App的背景（若能同时显示box2后方的其他元素则更佳），且不能直接在box2或box1上使用z-index。

方案1：背景同步法 #

利用背景固定定位，让box1的背景与App的背景完全同步，视觉上营造出“窗口”效果。这种方法简单直接，且能完美对齐背景。

修改后的CSS代码：

body {
  margin: 0px;
  padding: 0px;
}

.App {
  width: 100vw;
  height: 100vh;
  background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-size: cover; /* 确保背景铺满容器 */
}

@keyframes moveAround {
  0% {
    left: 50px;
  }
  50% {
    left: 25px;
  }
  100% {
    left: 50px;
  }
}

.box1 {
  width: 250px;
  height: 250px;
  position: relative;
  left: 50px;
  top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 核心：同步App的背景图，固定定位实现对齐 */
  background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-size: cover;
  background-attachment: fixed;
  animation: moveAround 3s infinite ease;
}

.box2 {
  width: 200px;
  height: 200px;
  border: 2px solid blue;
  background-color: rgba(255,255,255,0.1); /* 可选：添加半透明背景，突出窗口内元素 */
}

方案2：clip-path挖空法 #

通过clip-path给box1创建带边框的挖空区域，中间空白部分直接显示后方的App背景和其他元素，完全不需要依赖z-index控制层级。

修改后的CSS代码：

body {
  margin: 0px;
  padding: 0px;
}

.App {
  width: 100vw;
  height: 100vh;
  background-image: url(https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
  background-size: cover;
}

/* 测试用：验证是否能透过box1显示后方元素 */
.extra-element {
  width: 150px;
  height: 150px;
  background-color: rgba(255,0,0,0.5);
  position: absolute;
  left: 80px;
  top: 80px;
}

@keyframes moveAround {
  0% {
    left: 50px;
  }
  50% {
    left: 25px;
  }
  100% {
    left: 50px;
  }
}

.box1 {
  width: 250px;
  height: 250px;
  position: relative;
  left: 50px;
  top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: aqua;
  /* 核心：挖空中间200x200的区域，与box2尺寸匹配 */
  clip-path: polygon(
    0 0, 100% 0, 100% 100%, 0 100%,
    25px 25px, 225px 25px, 225px 225px, 25px 225px
  );
  animation: moveAround 3s infinite ease;
}

.box2 {
  width: 200px;
  height: 200px;
  border: 2px solid blue;
  background-color: transparent; /* 透明背景，让后方元素可见 */
}

对应的HTML（添加测试元素）：

<div class="App">
  <div class="extra-element"></div>
  <div class="box1">
    <div class="box2"></div>
  </div>
</div>

方案说明 #

• 方案1适合仅需显示背景的场景，无需修改DOM结构，兼容性较好。
• 方案2可同时显示后方其他元素，视觉效果更贴近真实窗口，但需精确计算clip-path坐标，确保挖空区域与box2尺寸匹配。

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