伪元素上的样式边框

Question

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

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

Answer 1

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

有趣的是，您可以使用outline

进行此操作

＆＃13;

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

＆＃13;

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

＆＃13;

其他选项

使用伪元素

1。带边框的伪元素

需要一些额外的变换才能轻推。

＆＃13;

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

＆＃13;

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

＆＃13;

2。具有框阴影的伪元素

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

伪元素上的样式边框

::before

要与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

Answer 3

强制性“我看到您想通过解决方案A解决此问题。解决方案A不好。这是解决方案B。”

简而言之，我建议：

伪元素：

A。 .my-div searched-element:nth-of-type(1)（即searched-element为p或h1或div）

B。 :first-child

C。 :first-of-type

D。 :last-child
margin-top: -10px，以便孩子可以上移

我建议的真正解决方案是将孩子的负顶边距与:first-child伪类的某些变体一起使用。

针对我的情况，实际上，我发现将所有子div的边界从border-top切换为border-bottom并使用:last-child更加容易在该范围内。

边界上的Z指数

3 个答案:

伪元素上的样式边框