1. ホーム
  2. 質問と答え
  3. このdivをブートストラップナビゲーションバーの上に移動するにはどうすればよいですか？

このdivをブートストラップナビゲーションバーの上に移動するにはどうすればよいですか？

2016-07-02 8 views
2

私はブートストラップナビゲーションバーの上にオファーを表示しようとしていますが、ナビゲーションバーはオファーストリップの上に表示されます。ここでこのdivをブートストラップナビゲーションバーの上に移動するにはどうすればよいですか？

は例です：

$('.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

は、位置属性のすべての値をしようとしましたが、何も動作していないようにみえます。どのようにこれを解決するためのアイデア？

出典

2016-07-02 LovingRails

+2

は、あなたの 'に' Z-index'プロパティを追加しようとしています。このように 'offertop'クラス：' .offertop { position：absolute; トップ：0; 左：0; 身長：0; 幅：100％; z-インデックス：2; } ' – Konrud

+2

このフィドルを見てください：https://jsfiddle.net/joherro3/ry52czaL/1/ –

答えて

3

最初。 .offertopは "position：absolute"なので、ページの通常のブロックフローから外れているからです。それはそこにありますが、navbarの後ろに隠れています。その位置を「相対」に変更すると、ナビゲーションバーが下に移動します。

秒。 .offerstripは、オーバーフローしているため、.offertopの高さが0にもかかわらず表示されます。コンテナの（.offertop）オーバーフローを "hidden"に設定する必要がないようにします。

第3。 pageloadでオファーを表示する場合は、高さを0に設定しないでください。「自動」にしておきましょう。デフォルト値です。

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

はまた、明示的にすべてのこれらのデフォルト値を設定する必要はありませんので、それはここだけ

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

なりfiddle

出典

2016-07-02 16:12:57

関連する問題

 関連する問題