Why can't I raise the stacking order of my background image with z-index?

Question

I try to fix a simple thing: I have a Bootstrap carousel and I have decoration in the background but the system of z-index does not work.

The illustration is on the text of the article instead of behind. I would like to have my illustration under the text.

.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>

EDIT

Here it is a codepen to make it easy : https://codepen.io/andrea121/pen/WNZBYPL In this codepen, if you delete "carousel-fade", I have my two svg behind the text. But if you add carousel-fade, it's on.

In default elements have static position which ignore z-index. Second it's level dependent. Nested elements have their own "z-index level" which is inferior to "higher level" elements. So you need to change the siblings to relative and give higher z-index to it. — digitalniweb, Jan 18 '22 at 17:50
You should simply use a background image (via CSS) rather than an image element. — isherwood, Jan 18 '22 at 17:51
I can't because I have two elements with illustration. I simplify the code for the question. — chtouk, Jan 18 '22 at 17:53
@andrea just change z-indexes and positions (relative, absolute) of .container , .illustration , svg. Plus the
must be relative too I guess. — digitalniweb, Jan 18 '22 at 18:08
Could you explain a bit more why you can't use background images? Having two elements with illustration doesn't preclude them both having a background image of their own - what am I misunderstanding? — A Haworth, Jan 18 '22 at 18:19

score 0 · Answer 1 · answered Jan 18 '22 at 18:30

0

Z-index will only work on positioned elements. Simply adding a z-index to a css class is not sufficient.

article { z-index: 2; } ❌

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

or

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

If more than one child has a positioned element, the last child will display on top.

Note: If your using !important it's usually because your trying to force rules. This usually means something's wrong in the code (usually, not always).

answered Jan 18 '22 at 18:30

Rolando Yera

820
4
12

I try this but It does not work. The elements are not positionned well. This because when I add "carousel-fade", its adding a z-index:1 to do the fade effect – chtouk Jan 19 '22 at 16:29
Without seeing your code, I have no idea what's going on. The questing was for z-index. Use codepen or something so we can help. – Rolando Yera Jan 19 '22 at 19:06
I edit my first message with a codepen link. Thanks – chtouk Jan 20 '22 at 07:54

Why can't I raise the stacking order of my background image with z-index?

1 Answers1