边界上的Z指数

Question

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

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

Answer 1

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

有趣的是，你可以用outline做到这一点

* {
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>

Answer 2

style border on pseudo element

1. 对于更高的z-index使用伪元素，例如。 ::before
2. 能够与div交互 - 在伪元素上使用pointer-events: none;（参见spec）

代码的重要部分：

.parent {
    position: relative;
    ...
}
.parent::before {
    pointer-events: none;
    position: absolute;
    border: 1px solid #000;
    ...
}

完整的例子：https://codepen.io/Michal-Miky-Jankovsky/pen/QoXbLz