React.js -- Bootstrap / Reactstrap -- z-index does not work on Carousel

Question

I want my fixed navbar that stays on the top of the page to display over everything as I scroll down through the page, but when I scroll down the Carousel ends up on top of the navbar.

I have tried to give a z-index: 0 with an !important tag to the carousel, and z-index: 1 to the nav bar but that didn't do the trick. There is a photo attached to show the problem I am talking about.

Answer 1

give the zindex of fixed navbar some higher value like z-index: 1090

I wrap the Navbar in a sticky div:-

<div className="sticky-top" style={{ zIndex: 1090 }}>
    <Navbar></Navbar>
</div>

BTW I use react-bootstrap.

Answer 2

I'm looking at my header CSS properties. My header has a z-index: 1. Fiasco. Change it to 1090. It will help you.

Check all elements what was overflow by the gallery. Check them all!!! (z-indexes)!