边界上的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

伪元素上的样式边框

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

代码的重要部分：

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

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