React.js -- Bootstrap / Reactstrap -- z-index 在 Carousel 上不起作用

Question

我希望我的固定导航栏保留在页面顶部，当我向下滚动页面时显示在所有内容之上，但是当我向下滚动时，旋转木马最终出现在导航栏顶部。

我曾尝试为旋转木马提供带有 !important 标签的 z-index: 0，以及为导航栏提供 z-index: 1，但这并没有奏效。附上一张照片来说明我说的问题。

Answer 1

给固定导航栏的 zindex 一些更高的值，比如 z-index: 1090

我将导航栏包裹在一个粘性的 div:-

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

顺便说一句，我使用 react-bootstrap。

Answer 2

我正在查看我的 header CSS 属性。我的 header 有一个 z-index： 1. 惨败。改成1090对你有帮助

检查画廊溢出的所有元素。 全部检查！！！（z-indexes）！

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