Question

我正在网站上工作，我想要实现的是我的页面的导航栏堆叠在滑块上。我试过了z-index属性。

我的HTML代码：

<nav class="navbar navbar-expand-md bg-danger navbar-dark sticky-top container custom-navi" style="z-index: 2">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>

<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Messages</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">More</a>
        </li>
    </ul>
</div></nav>

我想要实现的目标如下图所示：

我现在拥有的是：

Answer 1

为此目的，Bootstrap 4的类为fixed-top。

<nav class="navbar navbar-expand-md bg-danger navbar-dark fixed-top custom-navi">
<!-- Brand -->
<a class="navbar-brand" href="#">St. Clare's Sr. Sec School</a>

<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
</button>

<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Messages</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">More</a>
        </li>
    </ul>
</div></nav>

Answer 2

ZimSystem的fixed-top答案很好，但如果您不想修复该位置，可以将导航栏设置为绝对值。 Bootstrap 4具有类position-absolute（尽管将导航栏水平居中需要更多的工作）。

Answer 3

如果您将滑块放在导航栏后面，请尝试滑块和导航栏的以下css代码

.slider{
position:absolute;
top:0;
z-index:0;
}
.navbar-nav{
z-index:1;
}

如何调整导航栏下的滑块？

3 个答案: