为什么我的旋转木马没有放在我的粘性导航栏下面？

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="sticky-top"。

在阅读了 Bootstrap 的源代码后，我发现问题肯定是轮播相对定位，并且轮播的 z-index 为 1，轮播指示器的 z-index 为 2。

如果您不想使用内置类，则应在粘性类中添加至少 3 的 z-index：

z-index:3;

但是，Bootstrap 为其粘顶类设置了 1020 的 z-index，因此最好使用相同的索引。

z-index: 1020;