Question

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

以下是一个例子：

＆＃13;

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

＆＃13;

.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)
}

＆＃13;

<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

＆＃13;

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

Answer 1

首先。这是因为.offertop是＆＃34; position：absolute＆＃34;因此它超出了页面的正常块流程。它在那里，但隐藏在导航栏后面。如果你将它的位置改为＆＃34; relative＆＃34;，它会将导航栏向下移动。

二。尽管.offertop的高度为0，但仍显示.offerstrip，因为它溢出了它。防止你必须将容器（.offertop）溢出设置为＆＃34;隐藏＆＃34;。

第三。如果你想在页面加载时显示优惠 - 你不应该将它的高度设置为0.让它成为＆＃34; auto＆＃34; - 它是默认值。

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

此外，没有必要明确设置所有这些默认值，因此它只是

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

这里是fiddle

如何在引导程序导航栏上方移动此div？

1 个答案: