html - Bootstrap Carousel 定位问题

Question

我坚持使用 Bootstrap 轮播定位。简而言之，我必须像下图那样做 slider 。

几乎一整天我都在试图理解如何将我的 slider 像这样放置在图像上......因为我有 2 个部分。第一个 - 我的 HEADER，在 HEADER 部分之后，我有一个 Bootstrap slider ，它位于我的 .header 部分下方，我必须以某种方式将 slider 推到 .header 部分后面的顶部。有什么建议或指南吗？

这是我的代码，直到这一刻。

.top-layer { background: #8bc541; padding-bottom: 25px; }

.logo-container { display: flex; justify-content: center; align-items: center; position: relative; }
.logo { position: absolute; bottom: 9px; width: 164px; height: 32px; }
.logo a { margin-bottom: 5px; display: block; height: 100%; background: url(../images/logo.png) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }
.logo p { padding: 0 4px; margin-right: 2px; letter-spacing: 0.3px; cursor: pointer; text-align: center; }
.main-nav { clear: both; }
.main-nav .left-nav { list-style: none; float: left; text-align: right; padding-right: 136px; }
.main-nav .left-nav li,
.main-nav .right-nav li { display: inline-block; }
.main-nav .left-nav li a,
.main-nav .right-nav li a { font-size: 14px; font-weight: bold; color: #000; text-decoration: none; line-height: 24px; letter-spacing: 0.3px; }
.main-nav .left-nav li a:hover,
.main-nav .right-nav li a:hover { color: #fff; }
.main-nav .left-nav li + li:before,
.main-nav .right-nav li + li:before { content: ''; border-right: 2px solid #fff;  margin: 0 10px; }
.main-nav .right-nav { list-style: none; float: right; text-align: left; padding-left: 136px; }
.main-nav .left-nav li,
.main-nav .right-nav li { margin-top: 36px; }
.slider-content { position: absolute; top: 0; left: 50%; z-index: 20; }
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } 

.bg-layer { background: url(../images/bg.jpg) 0 0 no-repeat; background-size: cover; min-height: 941px; }

.glyphicon-chevron-left { background: url(../images/btn-change.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%;  }
.glyphicon-chevron-right { background: url(../images/btn-change.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; transform: rotate(180deg); font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }
.glyphicon-chevron-left:hover,
.glyphicon-chevron-right:hover { background: url(../images/btn-change-hov.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; }
.carousel-control.left,
.carousel-control.right { background: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<header class="header">
  <div class="container">
    <div class="row">
      <a id="menu-icon" href="#"><span></span></a>
      <nav class="main-nav">
        <div class="col-md-6">
          <ul class="left-nav">
            <li><a href="#" class="active-state">Home</a>
            </li>
            <li><a href="#">Evaporative Coolers</a>
            </li>
            <li><a href="#">Misting Fans</a>
            </li>
            <li><a href="#">Ice Makers</a>
            </li>
          </ul>
          <!-- left-nav -->
        </div>
        <!-- col-md-6 -->
        <div class="col-md-6">
          <ul class="right-nav">
            <li><a href="#">Humidifiers</a>
            </li>
            <li><a href="#">Air Purifiers</a>
            </li>
            <li><a href="#">Product Videos</a>
            </li>
            <li><a href="#">About Us</a>
            </li>
          </ul>
          <!-- right-nav -->
        </div>
        <!-- col-md-6 -->
      </nav>
      <!-- main-nav -->
    </div>
    <!-- row -->
    <div class="logo-container">
      <div class="logo">
        <a href="#" target="_blank">luma comfort</a>
        <p class="text-center">Why Buy Ugly?</p>
      </div>
      <!-- logo -->
    </div>
    <!-- logo-container -->
    <div class="moto">
      <h1>Because you’re not like<br> everyone else.</h1>
      <p>Lorem ipsum is simply dummy text of the printing</p>
      <a href="#" class="btn learn-more">Learn More</a>
    </div>
    <!-- moto -->
  </div>
  <!-- container -->
</header>
<!-- header -->
<div id="slider-content" class="carousel slide" data-ride="carousel" data-interval="false">
  <ol class="carousel-indicators hidden">
    <li data-target="#slider-content" data-slide-to="0" class="active"></li>
    <li data-target="#slider-content" data-slide-to="1"></li>
    <li data-target="#slider-content" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="active item">
      <img src="https://s22.postimg.org/e3zmp0bz1/image.jpg" title="someText" alt="someText" class="fill">
      <div class="carousel-content">

      </div>
      <div class="carousel-caption"></div>
    </div>
    <div class="item">
      <img src="https://s22.postimg.org/k679fi0f1/bg_2.jpg" title="someText" alt="someText" class="fill img-responsive">
    </div>
    <div class="item">
      <img src="https://s22.postimg.org/49d2wixel/bg_3.jpg" title="someText" alt="someText" class="fill img-responsive">
    </div>
  </div>


  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

我创建了一个简单的代码笔链接。

http://codepen.io/swapnaranjitanayak/pen/gLWEoY

我在这里制作了导航栏“position:absolute”。如果你想让它成为 "fixed"，请使用 Bootstrap 中的 navbar-fixed-top 预定义类。