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.

I think images have high z-index value. Increase the z-index of navbar — Rafee Shaik, Oct 15 '20 at 07:06
I had put the z-index on the navbar container, not the actual navbar. That's why it wasn't working. Thanks! — nKc, Oct 18 '20 at 13:00

Deepak Gupta · Accepted Answer · 2020-10-15T05:31:51.943

3

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.

edited Oct 15 '20 at 05:31

answered Oct 15 '20 at 05:22

Deepak Gupta

614
1
7
14

score 0 · Answer 2 · answered Oct 14 '21 at 20:02

0

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)!

answered Oct 14 '21 at 20:02

Liar Рonest

661
6
5

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

2 Answers2