css - 边界上的 Z 索引

Question

我一直在寻找一种将 z-index 添加到边框的方法，但似乎找不到，所以我想在这里问一下。

假设我有一个带有父 div 的 div。父级有一个边框，我希望该边框与子 div 重叠，但我不希望父级与它重叠。

Answer 1

你不能用边框来做到这一点。

有趣的是，您可以使用大纲

* {
box-sizing: border-box;
}

.parent {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
background: #bada55;
border:12px solid #663399;
outline: 12px solid red;
padding:25px
 }

.child {
width: 220px;
height: 100px;
background: lightblue;
}

<div class="parent">
  <div class="child"></div>
</div>

其他选项

使用伪元素

1。带边框的伪元素

需要一些额外的转换来插入到位。

* {
  box-sizing: border-box;
}
.parent {
  width: 200px;
  height: 200px;
  margin: 25px auto;
  position: relative;
  background: #bada55;
  padding: 25px;
}
.child {
  width: 220px;
  height: 100px;
  background: lightblue;
}
.absolute::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 12px solid red;
}

<div class="parent absolute">
  <div class="child"></div>
</div>

2。带框阴影的伪元素

* {
  box-sizing: border-box;
}
.parent {
  width: 200px;
  height: 200px;
  margin: 25px auto;
  position: relative;
  background: #bada55;
  padding: 25px;
}
.child {
  width: 220px;
  height: 100px;
  background: lightblue;
}
.shadow::after {
  content: '';
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 12px red;
}

<div class="parent shadow">
  <div class="child"></div>
</div>