边框的Z-index

Question

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

比如说，我有一个包含子div的父div。父div有一个边框，我希望该边框可以覆盖子div，但不希望父div也覆盖它。

- ItsNotAbyss

---

你不能这样做。为什么不能在子div上设置边框？肯定有一种方法可以实现所需的输出。请提供更多细节来扩展您的请求。 - Alberto

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>

- Paulie_D

---

谢谢Paulie_D - 很棒的答案 - Meli

很遗憾没有outline-bottom，outline-right等。 - RaisinBranCrunch

谢谢，大纲对我很有帮助！顺便说一句@RaisinBranCrunch，你可以使用边距来隐藏你不想要的轮廓。 - PieterT2000

这是一个不错的解决方案，但大多数浏览器没有轮廓半径 - 只有FF支持-moz-outline-radius。 - Nicramus

Answer 2

伪元素上的样式边框

1. 为了更高的z-index，使用伪元素，例如：::before
2. 如果想要与下层div进行交互，请在伪元素上使用pointer-events: none; (详见规范)

代码的重要部分：

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

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

- Michal Miky Jankovský

Answer 3

义务的 "我看到你想通过方案A解决这个问题。方案A是不好的。取而代之的是方案B。"

简而言之，我建议：

1. 伪元素：

   A. .my-div searched-element:nth-of-type(1) (即，searched-element 将是 p 或 h1 或 div)

   B. :first-child

   C. :first-of-type

   D. :last-child

2. margin-top: -10px 这样子元素就会向上移动

   我真正推荐的解决方案 是使用子元素的负上边距以及一些 :first-child 伪类的变体。

特别针对我的情况，我实际上发现更容易的方法是将所有子 div 的边框从 border-top 切换到 border-bottom，然后在该范围内使用 :last-child。

- T.Woody