Css 导航栏重叠旋转木马

我有个问题

我在我的一个网站上做了一个改变，我想在我的网站上加入一个全宽旋转木马。而不是巨无霸。 问题是我的导航栏与jumbotron区域、标题和所有内容重叠

这是我的html：

<div class="nav-area">
    <div class="container"> <!-- Start Container -->

            <nav class="navbar navbar-default" role="navigation">

              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">

                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>

                  <a class="navbar-brand" href="#">
                    <img alt="dentalclean logo" src="images/logo_2x.png">
                  </a>

                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav pull-right">
                    <li class="active"><a href="index.html">Pagina Inicial <span class="sr-only">(current)</span></a></li>
                    <!-- <li><a href="#">Contactos</a></li> -->

                  </ul>

                </div><!-- /.navbar-collapse -->


              </div><!-- /.container-fluid -->
            </nav>

        </div> <!-- End Container -->
</div>

<span itemscope itemtype="http://schema.org/LocalBusiness">
<div class="hero-section"> <!-- Start Hero Section -->

<div id="slider_dentalclean" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#slider_dentalclean" data-slide-to="0" class="active"></li>
        <li data-target="#slider_dentalclean" data-slide-to="1" class=""></li>
        <li data-target="#slider_dentalclean" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img alt="Dentista Leiria" src="images/hero-img.png">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Example headline.</h1>
                    <p>LOOOOOOOOOOOOOOOOOOOL</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img alt="Second slide" src="images/hero-img.png">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Another example headline.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img alt="Third slide" src="images/hero-img.png">
            <div class="container">
                <div class="carousel-caption">
                    <h1>One more for good measure.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                </div>
            </div>
        </div>
    </div>

</div>

我在我的网站上找到了我想要的东西：

---

但我不明白他们是如何让旋转木马标题不在导航栏后面的。

为什么不在你的.hero部分添加一个上边距呢

.hero-section{
   margin-top:5em; 

}

或者删除滑块上的负边距\u dentalclean

#slider_dentalclean{
  /*margin-top: -73px;*/
  z-index: -1;
}

我从您提到的示例中提取了carousel.CSS。确保您也包括bootstrap.js。我用包含的这两个文件更新了下面的fiddle，并将您的一张幻灯片放在模板中

我不是100%确定它能像你期望的那样工作，因为我看不到dropbox文件，所以你的图像没有显示出来。可能会在imgr中添加一个，或者替代谷歌或盖蒂的演示图像

---

更新了

这真的需要对额外的CSS进行调整。为什么你的主分区有-73px的利润率？如果你将其设置为0或其他正数，它看起来会被修复。我现在会把它放在小提琴上。我希望导航位于图像的顶部。就像我以前一样。。。但不是静态的，我希望它是一个滑块。对不起，我看不到整个小提琴，我在防火墙后面，阻止dropboxOh好的，np。我已经更新了这个问题，并且在我的网站上发布了我想要的东西。在大屏幕上看起来都很好，但是当你调整到小尺寸时，旋转木马标题开始向上，在导航后面，甚至部分从页面上消失。@user3870894我更新了我的答案，这应该会给你一个很好的开始，包括js，这个问题，你的小提琴也有同样的问题，当你缩小窗口时，标题会在导航栏后面。此外，你的小提琴上的设计与我的不同，我希望导航条位于旋转木马的顶部检查我的小提琴。

#slider_dentalclean{
  /*margin-top: -73px;*/
  z-index: -1;
}