私はいつもCSSポジショニングを理解していると思っていますが、再び不満を感じます。 [OK]を、私はposition:static
を持っているとき、すなわち、デフォルト、私のページが、この(日付ピッカーの内容が含まれているcol-xs-*
の親row
を強調検査要素で示す)のようになります。ブートストラップ、なぜポジションが固定されていますか?コンテンツを移動して行が見つからないようにしましたか?
私はすべてを維持したいと思いますそのページについては、日付ピッカーの内容を含むcol-xs-*
を修正したいので、ページがスクロールしたとき(Fiddleの例ではなく)、上に浮かぶようにしてください。私が気づいたばかりのz-index
は、position:fixed
を適用すると、何か面白いことが起こります。ここで再び要素を調べて、col-xs-*
の親row
が修正されたスクリーンショットがあります。 2つのことに注意してください:1)親のrow
はページ上で青で強調表示されていません。どこに行ったのかわからない、2)コンテンツは何らかの理由で右にシフトしている。これはもはや「比較のための」テキストの上に置かれていません。
誰かが私には、この動作を説明していただけますか?私はそれが永久に私のコードを台無しにしていると思う。私の最終目標は、最初のスナップショットのようにすべてを中央に保つことですが、col-xs-*
を修正するだけです。このフィドルで
コード:https://jsfiddle.net/2v3gpa7x/
関連col-xs-*
あなたが
を{使用する必要が動作するように、スクロールのいずれかのタイプのID date-row
'position:fixed'を使用すると、フローから要素を削除し、ブートストラップの位置付けはもはや適用されませんこれを中心にするにはhttps://jsfiddle.net/2v3gpa7x/1/ –
これは 'transform:translateX(-50%);'は何ですか? – james
要素をx軸に移動するので、この場合、要素を独自の幅の '50% 'の左に移動します。 –