HTML5 CSS3 Bootstrap - 滾動時滾動菜單重疊菜單

Question

試圖做一個頁面的HTML網頁，它必須響應，作爲一個要求，我不得不使用引導程序，我檢查了所有的標籤，找到問題。

我添加了一個傳送帶，當我向下滾動頁面時，它與菜單重疊。

Here is the CSS 

.carousel { 
    height: 600px; 
    margin-bottom: 0px; 
    display: block; 
position: relative; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
    z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
    height: 600px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    top: 0; 
    left: 0; 
    min-width: 100%; 
    height: 600px; 
} 
.carousel-caption{ 

-webkit-transition: all 500ms linear; 
-moz-transition: all 500ms linear; 
-o-transition: all 500ms linear; 
transition: all 500ms linear; 
position: absolute; 
bottom: 0; 
opacity: 1; 
filter: none; 
margin: 0 20% 0 0; 
padding: 60px 0px; 
background: none; 
} 

.carousel-caption h1 { 
display: inline-block; 
margin: 0 0 0px 0; 
padding: 16px; 
background: #000000; 
background: rgba(0,0,0,0.6); 
line-height: 1.1em; 
color: #f3f3f3; 
text-shadow: 0 1px 1px rgba(0,0,0,0.4); 
font-size: 50px; 
font-weight: 300; 
border-bottom: solid 1px #0085c8;} 

.carousel-caption p { 

background: #0085c8; 
background-color: rgba(0,133,200,0.8); 
} 

，這裏的HTML

<div class="page-section.intro"> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
     <!-- 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> 
     <div class="carousel-inner"> 
     <div class="item active"> 
      <img data-src="holder.js/900x500/auto/#777:#7a7a7a/text:First slide" alt="First slide"> 
      <div class="container"> 
      <div class="carousel-caption"> 
       <h1>Example headline.</h1> 
       <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 

      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img data-src="holder.js/900x500/auto/#666:#6a6a6a/text:Second slide" alt="Second slide"> 
      <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> 

      </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img data-src="holder.js/900x500/auto/#555:#5a5a5a/text:Third slide" alt="Third slide"> 
      <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> 

      </div> 
      </div> 
     </div> 
     </div> 

    </div><!-- /.carousel --> 

預先感謝您。

Answer 1

由於轉盤已經定位，只需添加：

.carousel { 
    z-index: 9; /* The fixed navbar has a z-index of 10 */ 
} 

Answer 2

你最好寫：

.header { 
    z-index: 9999; 
} 

這樣，就不會有重疊的菜單。

Answer 3

我有同樣的問題，我發現了一個解決方法，直到他們解決這個問題：

.carousel{ 
z-index: 0 
}