javascript - 如何将此 div 移动到 Bootstrap 导航栏上方？

Question

我试图在 Bootstrap 导航栏上方显示优惠，但导航栏显示在优惠条的顶部。

举个例子:

$('.offerbutton').on('click', function () {
  $('.offertop').toggleClass('active');
});

.offertop {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
   z-index: 2;
}
.offerstrip {
  height: auto;
  background-color: yellow;
  transition: height 0.5s;
  line-height: 40px;
  text-align: center;
  overflow: hidden;
}
.offertop.active .offerstrip{
  height: 0;
}
.offerbutton {
  position: absolute;
  top: 0;
  right: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  background-color: yellow;
  color: #fff;
  cursor: pointer;
}
.arrow-down {
  transition: transform 0.5s;
}
.offertop.active .arrow-up{
  transform: rotate(180deg)
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="offertop">
  <div class="offerstrip">
    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df
  </div>
  <div class="offerbutton">
    <i class="glyphicon glyphicon-chevron-up arrow-up"></i>
  </div>
</div>


<nav class="navbar navbar-default">
  <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" aria-expanded="false">
        <span class="sr-only">Toggle snavigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</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">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df     some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df    some content     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds
    some content dffss df     some content dffss
    some content dffss
    some content dffsssome content dffsssds cv
    some content dffss df

尝试了位置属性的所有值，但似乎没有任何效果。知道如何解决这个问题吗？

Answer 1

首先。这是因为 .offertop 是“position: absolute”，因此它在页面的正常 block 流之外。它在那里，但隐藏在导航栏后面。如果您将其位置更改为“相对”，它将向下移动导航栏。

其次。尽管 .offertop 的高度为 0，但仍会显示 .offerstrip，因为它溢出了。以防止您必须将容器的 (.offertop) 溢出设置为“隐藏”。

第三。如果您想在页面加载时显示报价 - 您不应将其高度设置为 0。将其设置为“自动” - 这是默认值。

.offertop {
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
}

另外，没有必要显式地设置所有这些默认值，所以它变成了

.offertop {
  position: relative;
  overflow: hidden;
}

这是 fiddle