如何实现嵌套DIV铺满父DIV且父DIV边框保持可见？

问题场景 #

父DIV带有边框，需要内部嵌套的子DIV（含地图）完全覆盖父DIV的整体尺寸（包括边框所在区域），同时确保父DIV的边框始终可见。当前通过绝对定位+负边距实现尺寸匹配时，子DIV会覆盖父边框，z-index、box-sizing等属性无法解决该问题。

解决方案 #

这里提供两种简洁可行的实现方式：

方法1：使用outline替代border

outline不占据布局空间，且会绘制在子元素上层，完美解决覆盖问题。只需修改父元素样式：

:root {
  --border-width: 16px;
  --neg-border-width: calc(var(--border-width) * -1);
}
.parent {
  position: relative;
  width: 360px;
  height: 240px;
  left: 10px;
  top: 10px;
  /* 用outline替换原border */
  outline: var(--border-width) dotted black;
}
.nested {
  position: absolute;
  top: var(--neg-border-width);
  right: var(--neg-border-width);
  bottom: var(--neg-border-width);
  left: var(--neg-border-width);
  background-color: lightblue;
}

原理：outline是元素的外层轮廓，不属于盒模型范围，绘制层级高于内部子元素，不会被子DIV覆盖。

方法2：用伪元素生成父边框

通过父元素的::before伪元素创建边框，设置更高z-index让边框显示在子元素上方：

:root {
  --border-width: 16px;
  --neg-border-width: calc(var(--border-width) * -1);
}
.parent {
  position: relative;
  width: 360px;
  height: 240px;
  left: 10px;
  top: 10px;
  /* 移除原border */
}
/* 伪元素生成边框 */
.parent::before {
  content: '';
  position: absolute;
  inset: 0;
  border: var(--border-width) dotted black;
  z-index: 1;
}
.nested {
  position: absolute;
  top: var(--neg-border-width);
  right: var(--neg-border-width);
  bottom: var(--neg-border-width);
  left: var(--neg-border-width);
  background-color: lightblue;
  z-index: 0;
}

原理：伪元素作为父元素的子节点，通过z-index控制堆叠顺序，让边框始终显示在子DIV之上。

完整示例代码（方法1） #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"> 
  <title>Border</title>
  <style>
    :root {
      --border-width: 16px;
      --neg-border-width: calc(var(--border-width) * -1);
    }
    .parent {
      position: relative;
      width: 360px;
      height: 240px;
      left: 10px;
      top: 10px;
      outline: var(--border-width) dotted black;
    }
    .nested {
      position: absolute;
      top: var(--neg-border-width);
      right: var(--neg-border-width);
      bottom: var(--neg-border-width);
      left: var(--neg-border-width);
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="nested"></div>
  </div>
</html>

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