html - Z-index 不堆叠

Question

我试了好久，看了好几篇文章还是没搞懂!我正在尝试将那个小图标移到标题的左侧，但由于某种原因它堆叠在父元素下方!

这是我的CSS:

        .step__content {
            margin-top: 120px;
            position: relative;

            div.ui-accordion-header {
                margin-left: 30px;

                &:after {
                    content: '';
                    position: absolute;
                    height: 20px;
                    width: 20px;
                    left: -7px;
                    background-image: url('../images/i.svg');
                    z-index: 100;
                }
            }
        }

这是 html:

第一个 :after 元素是图标!

这是一张图片:

我希望图标位于页眉的左侧!但是当我向左推它时，它会在下面吗？图标的完整图像不可见，因为一半在下面!

Answer 1

我认为实际发生的是伪元素只是在 overflow: hidden; 元素之外...

这对我有用(即使您删除了 z-index 样式)。 如您所见，伪元素位于文本上方。尝试将 :after z-index 更改为 -5，它会在下方显示。

.step__content {
  margin-top: 120px;
  position: relative;
}

.ui-accordion-header {
  position: relative;
  margin-left: 50px;
  z-index: 1;
}

.ui-accordion-header:after {
  content: '';
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: -20px;
  background-image: url('https://via.placeholder.com/150');
  background-size: cover;
  background-position: center;
  z-index: 5;
}

<div class="step__content">
  <div class="ui-accordion-header">
    <p>Headers</p>
  </div>
</div>