CSSの位置決めの仕組みを詳しく解説 その1_html/css_WEB-ITnose

CSS には 3 つの位置決めメカニズムがあります

• 標準フロー
• フローティング
• 絶対位置決め

として指定しない場合、すべてのタグは標準ストリーム内に配置されます。 ブロックレベルのタグは排他的な行を占有するため上から下に配置されますが、インラインおよびインラインのブロックレベルのタグは水平に配置されます。

css 位置

すべてのラベルはボックスです

position 属性を通じて、4 つの異なるタイプの位置を選択できます

• static: 標準フローに従って配置 (村の分割された土地、ルールに従って通常に分割)
• relative: フレームが一定の距離だけオフセットされ、通常のドキュメントで元々占有されていたスペースフローはまだ保持されています (私が割り当てました。土地は耕作していませんが、それでも私のものであり、あなたが分割した土地は依然としてルールに従って分割された土地です)
• absolute: ボックスは通常から削除されますドキュメント フロー (私は土地の割り当てをやめ、次の人がそれを地面に分割できます)、その包含ブロックに相対的に配置します (親ブロックからずっと検索し、静的ではない包含ブロックを見つけて、それを相対的に配置します) it)
• 修正: 絶対と似ていますが、含まれるブロックがウィンドウに直接設定されます。

トークはショー コードではありません!

静的は相対を書き込みません

<style>    .left{        position: relative;        left: -20px;    }    .right{        position: relative;        left: 20px;        background-color: blue;    }    .up{        position: relative;        top: -20px;        background-color: yellow;    }    .down{        position: relative;        background-color: red;    }</style><p>原始</p><p class="left">原始</p><p class="right">原始</p><p class="up">原始</p><p class="down">原始</p>

スクリーンショット 2016-03 -27 PM 8.08.48.png

top: -20px に設定したため、黄色の div が上にオフセットされていることに気付きました。 しかし、ここで重要な問題が発生します。次の赤い div は、ドキュメント フロー内の黄色の div の元の位置に従って下に配置されています。 上部のコードをコメントアウトすると、結果は次のようになります。以下のとおり

スクリーンショット 2016-03-27 8.08.18.png

これは、通常のドキュメント フローで元々占有されていたスペースがまだ保持されていることを相対的に意味します。