Question

尝试做一页的HTML网页，它必须是响应式的，作为一个要求我必须使用bootstrap，我检查了所有的标签，似乎无法找到问题。

我添加了一个Carousel，当我向下滚动页面时，它与菜单重叠。

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

我遇到了同样的问题，我找到了一个解决方法，直到他们修复它：

.carousel{
z-index: 0
}

Answer 3

你最好写一下：

.header {
    z-index: 9999;
}

这样，菜单上就不会有任何重叠。

HTML5 CSS3 Bootstrap - 滚动时轮播与菜单重叠

3 个答案: