为什么我不能用 z-index 提高背景图像的堆叠顺序？

Question

我尝试解决一个简单的问题：我有一个 Bootstrap 轮播，我在后台有装饰，但是 z-index 系统不起作用。

插图在文章的正文上，而不是在后面。 我想把我的插图放在正文下面。

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 0;
}

article {
  z-index: 1;
}

.illustration {
  z-index: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<section>
  <div class="container position-relative">
    <div class="carousel slide carousel-fade" id="ExampleCarousel" data-bs-ride="carousel" data-bs-interval="false">
      <div class="carousel-indicators">
        <button type="button" data-bs-target="#ExampleCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#ExampleCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
      </div>
      <div class="carousel-inner">

        <div class="carousel-item active">
          <div class="row py-0">
            <article class="col-12 position-relative">
              <div class="row">
                <header>
                  <h2>The Title</h2>
                </header>
                <div class="col-12">
                  <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit. Nulla vel elementum sapien. Fusce ac pellentesque mi. Nulla sollicitudin euismod quam efficitur aliquet. Integer convallis tempus elit, aliquet ullamcorper arcu rutrum vitae.
                    Vivamus sit amet lobortis erat, ut congue est. Etiam sit amet ipsum rhoncus, vestibulum</p>
                </div>
              </div>
            </article>
            <div class="col-md-5">
              <img src="https://via.placeholder.com/80" alt="Image" class="img-fluid">
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="row py-0">
            <article class="col-12 position-relative">
              <div class="row">
                <header>
                  <h2>The Title</h2>
                </header>
                <div class="col-12">
                  <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit. Nulla vel elementum sapien. Fusce ac pellentesque mi. Nulla sollicitudin euismod quam efficitur aliquet. Integer convallis tempus elit, aliquet ullamcorper arcu rutrum vitae.
                    Vivamus sit amet lobortis erat, ut congue est. Etiam sit amet ipsum rhoncus, vestibulum</p>
                </div>
              </div>
            </article>
            <div class="col-md-5">
              <img src="https://via.placeholder.com/80" alt="Image" class="img-fluid">
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
<div class="illustration position-absolute">
<svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 22.48A54.831 54.831 0 0 1 5.076 18c-1.044-1.53-2.072-3.23-2.837-4.918C1.469 11.382 1 9.77 1 8.4a7.35 7.35 0 0 1 2.192-5.228A7.552 7.552 0 0 1 8.5 1c1.993 0 3.902.782 5.307 2.172A7.35 7.35 0 0 1 16 8.4c0 1.37-.468 2.982-1.239 4.682-.765 1.688-1.793 3.388-2.837 4.917a54.819 54.819 0 0 1-3.424 4.48ZM5.65 11.232A4.054 4.054 0 0 0 8.5 12.4a4.054 4.054 0 0 0 2.85-1.167A3.982 3.982 0 0 0 12.536 8.4a3.982 3.982 0 0 0-1.186-2.833A4.054 4.054 0 0 0 8.5 4.4a4.054 4.054 0 0 0-2.85 1.167A3.982 3.982 0 0 0 4.465 8.4c0 1.065.428 2.083 1.187 2.833Z" stroke="#B5B5C3" stroke-width="2"/></svg>
</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

编辑

这里有一个代码笔，可以让它变得简单：https://codepen.io/andrea121/pen/WNZBYPL 在这个 codepen 中，如果你删除“carousel-fade”，我在文本后面有两个 svg。但如果你添加 carousel-fade，它就会开启。

Answer 1

Z-index 仅适用于定位元素。简单地向 css 类添加 z-index 是不够的。

article { z-index: 2; } ❌

article { position: absolute; z-index: 2; } ✅

或

article { position: relative; z-index: 2; }✅

如果多个子元素具有定位元素，则最后一个子元素将显示在顶部。

注意：如果您使用!important，通常是因为您试图强制执行规则。这通常意味着代码中有问题（通常，并非总是如此）。