2016-04-03 4 views
0

私はいつもCSSポジショニングを理解していると思っていますが、再び不満を感じます。 [OK]を、私はposition:staticを持っているとき、すなわち、デフォルト、私のページが、この(日付ピッカーの内容が含まれているcol-xs-*の親rowを強調検査要素で示す)のようになります。ブートストラップ、なぜポジションが固定されていますか?コンテンツを移動して行が見つからないようにしましたか?

enter image description here

私はすべてを維持したいと思いますそのページについては、日付ピッカーの内容を含むcol-xs-*を修正したいので、ページがスクロールしたとき(Fiddleの例ではなく)、上に浮かぶようにしてください。私が気づいたばかりのz-indexは、position:fixedを適用すると、何か面白いことが起こります。ここで再び要素を調べて、col-xs-*の親rowが修正されたスクリーンショットがあります。 2つのことに注意してください:1)親のrowはページ上で青で強調表示されていません。どこに行ったのかわからない、2)コンテンツは何らかの理由で右にシフトしている。これはもはや「比較のための」テキストの上に置かれていません。

enter image description here

誰かが私には、この動作を説明していただけますか?私はそれが永久に私のコードを台無しにしていると思う。私の最終目標は、最初のスナップショットのようにすべてを中央に保つことですが、col-xs-*を修正するだけです。このフィドルで

コード:https://jsfiddle.net/2v3gpa7x/

関連col-xs-*あなたが
を{使用する必要が動作するように、スクロールのいずれかのタイプのID date-row

+0

'position:fixed'を使用すると、フローから要素を削除し、ブートストラップの位置付けはもはや適用されませんこれを中心にするにはhttps://jsfiddle.net/2v3gpa7x/1/ –

+0

これは 'transform:translateX(-50%);'は何ですか? – james

+0

要素をx軸に移動するので、この場合、要素を独自の幅の '50% 'の左に移動します。 –

答えて

0

を持っているポジション:絶対;トップ:0;左:0 ; margin:0 auto;} 'auto'という用語は、ページの内容を水平に中央に保ちます。 「絶対」はすべてがグループとして動くことを可能にする。
あなたが望むものをもっと理解したら、オブジェクトの位置を強制するためにul 'wrappers'を追加することができます

関連する問題