0
私は、スクロールダウンするときに、ナビゲータ（水平）を固定するためにブートストラップ接尾語を使用しようとしています。ナビゲータは下にスクロールすると上部に貼り付けられますが、スクロール可能なコンテンツは下にスクロールできます。ブートストラップの接尾辞col-xx-yyクラス
これ以上の背景...本文、つまりスクロール可能なコンテンツは、レイアウトをフォーマットするためにcol-md- *クラスを使用するブートストラップパネルと入力フィールドを持つフォームです。このクラスの使用は、オーバーラップを引き起こしていると思われる「位置：相対」属性を追加しているようです。
私の質問の位置なぜ....私は、CSSの初心者ですので
- 私は理解していない：固定（ナビゲーター）：相対内容は位置と重なっています。
- ブートストラップが位置を追加する理由を理解できません：追加のtop、left、bottomまたはright属性を持たないこれらのコンポーネントを基準にします。これらの属性の1つがないと、これはデフォルトの "position：static"と同じではありませんか？
- 最後に、これをどのように修正しますか？私は、ブートストラップのアップグレードで壊れない標準的な非ハック・ソリューションを探しています。
編集：私はアイデアを得て、ナビゲータに正のZ-インデックスを追加し、スクロール可能なコンテンツがナビゲータの後ろにスクロールするようになりました。これは適切な解決策ですか？私はまだ私の他の質問への答えを探しています。ありがとうございました。
*編集2：ここにすべての私の添付問題の答えが見つかりました。 https://www.jero.co.nz/blog/bootstrap-affix-plugin/ 私がここで取り上げなかったもう1つの問題...オフセットがゼロの場合は、クリックとスクロールの両方に添えられていません。設定1.
へのオフセットは、今、私は解決としてこれをマークする方法を把握する必要があります。*ここで
私はW3Schoolsのは例を貼り付ける使用して作成したフィドルがあります。 https://jsfiddle.net/fLx60zvh/2/
ありがとうございました。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<div class="col-md-6">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
<div class="col-md-6">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</div>
</body>
</html>
はいman z-indexは正しい方法です。 – grusl83
@ grusl83 - ありがとう。最近、私はこのCSSの問題を解決します。 – PCash