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