CSS 边界上的 Z-index

Z-index on borders

提问by ItsNotAbyss

I have been searching around for a way to add z-index to borders but can't seem to find one so I thought I'd ask here.

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

Say I have a div with a parent div. The parent has a border and I want that border to overlap the child div but I don't want the parent to overlap it.

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

回答by Paulie_D

You cannot do that with a border.

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

Interestingly though, you cando it with an outline

有趣的是，你可以用一个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>

Other Options

其他选项

Using pseudo-elements

使用伪元素

1. Pseudo-element with border

1. 带边框的伪元素

Requires some additional transforms to nudge into place.

需要一些额外的转换来微调到位。

* {
  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. Pseudo-element with box-shadow

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>

回答by Michal Miky Jankovsky

style border on pseudo element

伪元素上的样式边框

1. for higher z-index use pseudo element eg. ::before
2. to be able to interact with div under - use pointer-events: none;on the pseudo element (see spec)

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

important part of code:

代码的重要部分：

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

full example: https://codepen.io/Michal-Miky-Jankovsky/pen/QoXbLz

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

回答by T.Woody

Obligatory "I see you want to solve this by solution A. Solution A is bad. Here is solution B instead."

强制性“我看到你想通过解决方案 A 解决这个问题。解决方案 A 很糟糕。这里是解决方案 B。”

In short, I would recommend:

简而言之，我会建议：

1. Pseudo elements:

   A. .my-div searched-element:nth-of-type(1)(i.e. searched-elementwould be por h1or div)

   B. :first-child

   C. :first-of-type

   D. :last-child

2. margin-top: -10pxsuch that the child will be moved up

   And the real solution I would recommendis using the negative top margin of the child with some variants of the :first-childpseudo classes.

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伪类的一些变体。

For my case specifically, I actually found it easier to switch my borders from border-topto border-bottomon all of the child divs and then use :last-childwithin that scope.

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