Question

我正在寻找解决方案，并尝试了this SO中的所有建议，但都失败了。
我想在父级后面做边框作为伪元素。

.member__profile-container {
  flex-basis: 50rem;
  position: relative;
  z-index: 4;
}

.member__profile {
  padding-top: 150%;
  background-image: url('../images/irene.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 -1rem .5rem 1rem rgba(0,0,0,0.3);
  margin-right: 4rem;
  transform: rotate(-5deg) translateX(-10%);
  animation: expand 1s ease .5s forwards;
}

.member__profile:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 10px solid white;
  transform: rotate(-5deg) translateX(-10%);
  animation: expand 1s ease .5s forwards;
}

<div class="member__profile-container">
  <div class="member__profile"></div>
</div>

结果如下所示，但边框必须在父级后面。

NOT WORKING EXAMPLE

Answer 1

要使其正常运行，我必须对您的html进行一些修改。
由于.member__profile中的转换，在以下位置创建了堆栈上下文此级别，并且由于::before元素is a descendant of his element，z-index只会在.member__profile内移动伪元素。

HTML

 <div class="member__profile-container">
     <div class="member__profile"></div>

     <!-- moved the pseudo-element to a sibling element -->
     <!-- removing 'the transform' inside .member__profile and 
          keeping the pseudo element would also work -->

     <div class="member__undercover"></div>
 </div>

CSS

.member__profile-container {
  /* creating a stacking context on the parent */
  position: relative;
  z-index: 1;
  flex-basis: 50rem;
  /* added color to make position clearer */
  background-color: green;
}


.member__profile {
  position: relative;
  padding-top: 150%;
  background-image: url('../images/irene.jpg');
  /* added color to make position clearer */
  background-color: red;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 -1rem .5rem 1rem rgba(0, 0, 0, 0.3);
  margin-right: 4rem;
  transform: rotate(-5deg) translateX(-10%);
  z-index: 0;
}

.member__undercover {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 10px solid white;
  transform: rotate(-5deg) translateX(-10%);
  /* added color to make position clearer */
  background-color: blue;
  z-index:-1;
}

通过在容器上使用“ position: relative; z-index: 1;”，我在此级别上创建了一个堆栈上下文，并可以使用z-index自由地对其子级进行重新排序。
如果您在容器中未创建堆栈上下文的情况下使用z-index，则将在文档中已创建堆栈上下文的其他地方使用堆栈上下文，或者如果之前不存在堆栈上下文，则将使用堆栈上下文。
如果您想要容器后面的边框而不是轮廓，则只需移动 “ position: relative; z-index: 1;”在一位父级上（不要复制，请移动）。

要了解有关堆栈上下文的更多信息：MDN, The stacking context

Answer 2

您需要将负值 z-index值应用于伪元素。

例如z-index: -6

工作示例：

div {
width: 100px;
height: 180px;
margin: 20px 60px;
background-color: rgb(255, 0, 0);
}

div::after {
content: '';
position: absolute;
top: -6px;
left: 2px;
z-index: -6;
width: 100px;
height: 180px;
margin: 20px 60px;
border: 6px solid rgb(0, 0, 0);
transform: rotate(-30deg);
}

<div></div>

进一步阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Answer 3

尝试向您的伪元素中添加负的z-index。

例如。

.yourclass:: pseudoelement {
    z-index: -1;
}

如何将伪元素放在父元素后面？

3 个答案: