css - 导航栏重叠轮播

Question

我有一个问题。

我对我的网站进行了更改，我想在我的网站上加入一个全 Angular 轮播。而不是超大屏幕。问题是我的导航栏与超大屏幕区域、标题和所有内容重叠。

这是我的 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>

对于缺乏组织性，我深表歉意。

顺便说一句，我正在使用 sass 和 bootstrap。

这是由此产生的问题:https://www.dropbox.com/s/bigm6291gmwgcf6/Screenshot%202015-04-06%2018.46.43.png?dl=0

非常感谢，我在这里搜索了所有答案，但找不到有效的答案。

fiddle :https://jsfiddle.net/yjbjvtx2/

CSS:

    .nav-area{
      position:absolute;
      top: 0;

   }

    #slider_dentalclean{
      margin-top: 0;
      z-index: -1;
    }

我在我的网站上找到了我想要的东西:http://getbootstrap.com/examples/carousel/

但我不明白他们是如何让轮播标题不在导航栏后面的。

Answer 1

为什么不直接在 .hero-section 中添加上边距呢？

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

或者删除#slider_dentalclean 上的负边距？

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

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

我不能 100% 确定它是否按您预期的那样工作，因为我看不到 Dropbox 文件，所以您的图片没有显示。也许将一个添加到 imgr 或替换来自 google 或 getty 的演示图像。

https://jsfiddle.net/joshvito/o8zqyt06/ 已更新