【问题标题】：Bootstrap: Overlapping header/footer/content on top of full-screen carousel?Bootstrap：在全屏轮播顶部重叠页眉/页脚/内容？
【发布时间】：2015-11-05 23:11:20
【问题描述】：

我正在使用 Bootstrap 中的基本全屏轮播。效果很好，全屏。问题是我需要为其添加自定义页眉和页脚（以及中心的一些文本）。我希望页眉和页脚与轮播重叠（就像轮播在后台一样）。这可能吗？我已经尝试过使用 z-index ，但到目前为止没有成功。

这是轮播的代码。

<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('assets/img/background-image.jpg');"></div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

【问题讨论】：

你想在这里达到什么目的？
@FiidoFirdauz 我希望网站背景成为轮播。我希望能够将内容放在轮播之上。（即页眉、页脚和中间的一个段落）。
这个问题已经在这里回答了stackoverflow.com/questions/19469705/…
@NJ_93 我之前看过，但仍然无法正常工作。我究竟在哪里为页眉和页脚添加 HTML 标记？因为如果我在轮播代码之前添加页眉，在轮播代码之后添加页脚，我也会遇到同样的问题。我没有重叠，它只是让轮播不再全屏。

标签： html css twitter-bootstrap carousel

【解决方案1】：

更新 1.0

我已经根据我的模板进行了调整。希望你从我的编码中学到一些东西。

HTML

<div class="wrapper">
    <div class="nav-bar-area">
        <div class="menu">
            <div id="text">Menu</div>
            <div id="image"><img src="http://www.rcunlocks.com/IMG_0468.PNG" /></div>
        </div>
        <div class="nav-bar">
            <ul>
                <li>Home</li>
                <li>About Us</li>
                <li>Products</li>
                <li>Services</li>
                <li>Careers</li>
                <li>Contact US</li>
              </ul> 
            </div>
    </div>
<div class="container--head">
  
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    
    <div class="carousel-tooltip">
      <div class="caraousel-tooltip-item active" data-index="0">
        <a href="#" class="tooltip-carousel" style="top:100px;left: 100px;padding:5px 10px;background:#f00;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Wicked Sick">
          <span class="fa fa-heart"></span>
        </a>
        <a href="#" class="tooltip-carousel" style="top:120px;left: 400px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="First Blood">
          <span class="fa fa-star"></span>
        </a>
      </div>
      <div class="caraousel-tooltip-item" data-index="1">
        <a href="#" class="tooltip-carousel" style="top:120px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="top" data-content="NeverMore">
          <span class="fa fa-plus"></span>
        </a>
      </div>
      <div class="caraousel-tooltip-item" data-index="2">
        <a href="#" class="tooltip-carousel" style="top:100px;left: 500px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Pudge">
          <span class="fa fa-plus"></span>
        </a>
      </div>
      <div class="caraousel-tooltip-item" data-index="3">
        <a href="#" class="tooltip-carousel" style="top:20px;left: 300px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="right" data-content="Hello World">
          <span class="fa fa-plus"></span>
        </a>
      </div>
      <div class="caraousel-tooltip-item" data-index="4">
        <a href="#" class="tooltip-carousel" style="top:180px;left: 200px;padding:5px 10px;background:#000;color:#fff;display:inline-block" data-container="body" data-toggle="popover" data-placement="bottom" >
          <span class="fa fa-plus"></span>
        </a>
      </div>
    </div>

    <!-- Indicators -->
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      
      <div class="item active">
        <img src="http://blogs-images.forbes.com/rogerkay/files/2014/06/dell-background-2.jpg" alt="..." style="width:100%">
          <div class="carousel-caption">
            <h3>Dell</h3>
            Bring The Game
          </div>
          </div>
        <div class="item">
          <img src="http://www.techarena.co.ke/wp-content/uploads/2015/02/acer-on-black-wallpapers_30230_1920x1080.jpg" alt="..." style="width:100%">
            <div class="carousel-caption">
              <h3>Acerr</h3>
              Just Starting
            </div>
            </div>
          <div class="item">
            <img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
              <div class="carousel-caption">
                <h3>Lorem ipsum dolor</h3>
                Lorem ipsum dolor sit amet, tharsiam eam est in.
              </div>
              </div>
            <div class="item">
              <img src="http://www.hardwareinside.de/wp-content/uploads/2015/06/Asus_logo-7.jpg" alt="..." style="width:100%">
                <div class="carousel-caption">
                  <h3>Lorem ipsum dolor</h3>
                  Lorem ipsum dolor sit amet, tharsiam eam est in.
                </div>
                </div>
              <div class="item">
                <img src="http://orig08.deviantart.net/3f83/f/2012/097/c/b/hp_in_dark_by_yarinsl45-d4vak5s.png" alt="..." style="width:100%">
                  <div class="carousel-caption">
                    <h3>Hello World</h3>
                    The Taste Can't Describe
                  </div>
                  </div>
              </div>

              <!-- Controls -->
              
            </div>
          </div>
  </div>
        <!-- Fontawesome -->
          <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

            <!-- Bootstrap -->
            <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
              <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
              <!-- Include all compiled plugins (below), or include individual files as needed -->
              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

CSS

  .body {
    background-color: #bbb;
  }

  .container--head {
      background: #BF3E11;
    }

    .tooltip-carousel {
      position: absolute;
      z-index: 11;
      border-radius: 50%;
    }

    .caraousel-tooltip-item {
      display: none;
    }

    .caraousel-tooltip-item.active {
      display: block;
    }

#menu {
                font-family: Arial, sans-serif;
                font-weight: bold;
                text-transform: uppercase;
                margin: 50px 0;
                padding: 0;
                list-style-type: none;
                background-color: #eee;
                font-size: 13px;
                height: 40px;
                border-top: 2px solid #eee;
                border-bottom: 2px solid #ccc;
            }
            #menu li {
                float: left;
                margin: 0;              
            }
            #menu li a {
                text-decoration: none;
                display: block;
                padding: 0 20px;
                line-height: 40px;
                color: #666;
            }
            #menu li a:hover, #menu li.active a {
                background-color: #f5f5f5;
                border-bottom: 2px solid #DDD;
                color: #999;
            }
            #menu_wrapper ul {margin-left: 12px;}
            #menu_wrapper {padding: 0 16px 0 0; background: url(images/grey.png) no-repeat right;}
            #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(images/grey.png) no-repeat left;}

.wrapper{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
}

.nav-bar-area{
  width: 100%;
  height: 60px;
  background-color: #000;
  padding: 0;
  margin:0 auto;
  position:relative;

}

ul{
  margin: 0 auto;
  padding: 0;
  width: 600px;
  height: 60px;
}

ul li{
  display:inline;
  float:left;
  padding: 10px 10px 10px 8px;
  margin: 0 3% 0 0;
  color: #fff;
  cursor:pointer;
  line-height: 225%;
}

li:hover{
  background-color: #888888;
}

.menu{
display:none;
color:#fff;
font-weight:bold;
}

#text{
float:left;
}

 #image{
 float:right;
 cursor:pointer;
 }
    


@media screen and (max-width: 600px){
    .nav-bar-area{
    height:auto;
    overflow:auto;
    }
    
    ul{
    width: 100%;
    height: auto;
    display:block;
    overflow: hidden;
    }
    
    ul li{
    width: 50%;
    float:left;
    position: relative;
    display:block;
    margin: -1px;
    padding: 10px 0 10px 0;
    text-indent: 25px;
    border-bottom: 1px solid #888888;
    border-right: 1px solid #888888;
    }
    
    .nav-bar{
    display:block;
    }   
    
    
}

@media screen and (max-width: 480px){

    .menu{
    display:block;
    padding: 20px 0 40px 0;
    border-bottom: 1px solid #fff;
    }
    
    #text{
    margin: 0 0 0 20px;
    }
    
    #image{
    margin: 0 30px 0 0;
    }
    
    .nav-bar{
    display:none;
    }
    
    .nav-bar{
    font-size: 0.8em;
    }
    

}

$(function(){
        $('.tooltip-carousel').popover();

        $('#carousel-example-generic').on('slide.bs.carousel', function () {
          $('.tooltip-carousel').popover('hide');
          $(this).find('.caraousel-tooltip-item.active').fadeOut(function(){
          $(this).removeClass('active');
          });
        });

        $('#carousel-example-generic').on('slid.bs.carousel', function () {
          var index = $(this).find('.carousel-inner > .item.active').index();
          $(this).find('.caraousel-tooltip-item').eq(index).fadeIn(function(){
          $(this).addClass('active');
          });
          //alert(index);
        });
    
        $('.tooltip-carousel').mouseenter(function(){
        $(this).popover('show');
      }).mouseleave(function(){
        $(this).popover('hide');
      });
      });

这里是DEMO。

【讨论】：

这与我现在拥有的几乎相同，但这并不是我想要的。我正在寻找类似this 图像的东西。看看一切都是透明的，并且就在图像上吗？不高于也不低于。我可以做图像中的内容，唯一的问题是让它成为图像滑块（轮播）而不是静态图像。
现在看起来更复杂了。