不能定位::在其父级后面的伪元素之前[重复]

问题描述 投票：0回答：1

我尝试创建一个 div，并让它的 ::before 出现在它后面，使其看起来像某种阴影，但由于某种原因，我无法让伪元素出现在原始元素后面。

<div class="hero container split">
                <div class="hero__cont-image bg-dark"><img src="" alt="" class="hero_cont-image__image">
                </div>

.hero__cont-image {
  position: relative;
  transform: rotate(0);
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(-50vw + 50%);
  border-radius: 0px 300px 300px 0px;
}

.hero__cont-image::before {
  content: "";
  background-color: blue;
  position: absolute;
  width: 125%;
  height: 125%;
  z-index: -1;
}

我希望伪元素出现在原始元素后面

css css-selectors pseudo-element
1个回答
0
投票

在父级上 

transform
将创建一个新的堆叠上下文，这使得父级成为堆叠上下文的根元素。即使 z 索引为负，伪元素也无法将自身降低到根元素以下，因此它始终位于父元素之上。

如果您没有使用变换，请将其删除，并且带有负元素的伪元素将显示在父元素下方，因为现在父元素不再是其堆叠上下文的根元素。

.hero__cont-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  left: calc(-50vw + 50%);
  border-radius: 0px 300px 300px 0px;
}

.hero__cont-image::before {
  content: "";
  background-color: blue;
  position: absolute;
  width: 125%;
  height: 125%;
  z-index: -1;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>

<body>
  <div class="hero container split">
    <div class="hero__cont-image bg-dark"><img src="https://i.stack.imgur.com/memI0.png">
    </div>
  </div>
</body>

注意：这些元素创建新的堆叠上下文：

Opacity
、
transforms
、
filters
、
css-regions
、
paged media
。如果需要旋转父元素，请在 div 上创建一个包装器 
div
并旋转该包装器。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.