為什么我的旋轉木馬沒有放在我的粘性導航欄下面？

Question

我決定在第二部分（在頁面中間的英雄之后）添加一個輪播到我的網站，然后我嘗試添加一個粘性導航欄，它可以正常工作，除了導航欄上方顯示的輪播。

這是我用於輪播的代碼（我使用了 Bootstrap 5）。

<section class="bg-dark text-dark text-center text-sm-start MyContent">
    <div class="bg-light">
        <div class="container" >
            <div class="d-sm-flex align-items-center justify-content-center">

                <!-- carousel -->

                <div class="carousel slide Mycarousel" id="demo" data-bs-ride="carousel">

                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

                        <button type="button" data-bs-target="#demo" data-bs-slide-to="1" aria-label="Slide 2"></button>

                        <button type="button" data-bs-target="#demo" data-bs-slide-to="2" aria-label="Slide 3"></button>

                        <button type="button" data-bs-target="#demo" data-bs-slide-to="3" aria-label="Slide 4"></button>

                        <button type="button" data-bs-target="#demo" data-bs-slide-to="4" aria-label="Slide 5"></button>
                    </div>

                    <div class="carousel-inner">
                        <div class="carousel-item active">
                          <img src="/images/very.jpg" class="d-block width1" alt="...">
                          <div class="carousel-caption d-none d-sm-block">
                            <button class="btn btn-primary" type="button">Very Little Nightmares</button>
                          </div>
                        </div>

                        <div class="carousel-item">
                          <img src="/images/pubg.jpg" class="d-block width1" alt="...">
                          <div class="carousel-caption d-none d-sm-block">
                            <button class="btn btn-primary" type="button">PUBG New-state</button>
                          </div>
                        </div>

                        <div class="carousel-item">
                          <img src="/images/pes.jpg" class="d-block width1" alt="...">
                          <div class="carousel-caption d-none d-sm-block">
                            <button class="btn btn-primary" type="button">PES 2021</button>
                          </div>
                        </div>

                        <div class="carousel-item">
                          <img src="/images/cod.jpg" class="d-block width1" alt="...">
                          <div class="carousel-caption d-none d-sm-block">
                            <button class="btn btn-primary" type="button">COD Mobile</button>
                          </div>
                        </div>

                        <div class="carousel-item">
                          <img src="/images/garena-free-fire-z4-1336x768.jpg" class="d-block width1" alt="...">
                          <div class="carousel-caption d-none d-sm-block">
                            <button class="btn btn-primary" type="button">Free Fire</button>
                          </div>
                        </div>
                    </div>

                    <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>

                    <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

                <!-- carousel -->

                <div class="divtwo">

                    <h1 id="headerOne1" class="text-warning mx-5 px-1 d-sm-block img-fluid w-50 w-ms-auto">Best <span class="text-info">Games</span> </h1>

                    <p class="lead paragraph mx-5 px-1">Want more amazing games..?</p>

                    <button type="button" class="btn btn1 btn-outline-warning">Recommended</button>
                </div>
            </div>
        </div>
    </div>
</section>

這是我用於粘性導航欄的 Javascript 代碼。

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Answer 1

Bootstrap 有一個內置的 class 使您的 header 具有粘性： class="sticky-top" 。

在閱讀了 Bootstrap 的源代碼后，我發現問題肯定是輪播相對定位，並且輪播的 z-index 為 1，輪播指示器的 z-index 為 2。

在您的情況下，如果您不想使用 class 中的構建，您應該在粘性 class 中添加至少 3 的 z-index：

z-index:3;

然而，Bootstrap 為其粘性頂部 class 設置了 1020 的 z-index，因此使用相同的索引是一個好主意。

z-index: 1020;