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

【问题标题】：How do I adjust the slider under navbar?如何调整导航栏下的滑块？
【发布时间】：2018-03-21 04:06:44
【问题描述】：

我正在开发一个网站，我想要实现的是页面的导航栏堆叠在滑块上。我试过 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>

我想要达到的效果如下图所示：

我现在拥有的是：

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4 navbar

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您想将滑块放在导航栏后面，请尝试下面的 CSS 代码用于滑块和导航栏

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

【讨论】：