Why my carousel doesn't get down under my sticky navbar?

Question

I decided to add a carousel to my website in the second section (in the middle of the page after the hero), then I try to add a sticky navbar and it's work correctly except for the carousel shown above the navbar.

here is the code I used for the carousel (I used 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>

this is the Javascript code I used for my sticky navbar.

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 has a built in class to make your header sticky: class="sticky-top".

After reading the source code for Bootstrap I found out the issue is certainly that the carousel is positioned relatively and has a z-index of 1 for the carousel and 2 for the carousel-indicators.

In your case if you don't want to use the build in class, you should add a z-index of at least 3 to your sticky class:

z-index:3;

However Bootstrap sets a z-index of 1020 for its sticky-top class, so it would be a good idea to use the same index.

z-index: 1020;