Position
794 ワード
Positions - static/relative/absolute/fixed
私が使っている位置のタイプと基準点に注意してください!
static:すべての要素のデフォルトの位置値.最も一般的な状態
相対的に移動基準点は本人の元の場所です.floatのように親を離れることはありますが、自分の元の位置を記憶しているのでレイアウトは変わりませんし、崩れません.
absolute:floatと同様にブロックできない属性となり、親ブロックから離れる
しかし、floatとは異なり、inlineコンテンツはfloatの存在に気づかずに回避される.
それぞれ自分の道を歩く様子...
親に属するfloatとは異なりabsoluteの選択基準点は比較的自由である.
祖先要素が基準点となる場合、祖先要素の位置は相対的であることが望ましい.
固定:ほぼ絶対に等しい.違いがある場合は、ビューポートサイズが基準点です.ビューポート:私が見ている画面の幅.もし私がpositionをfixedに設定し、bottomを0 pxに設定したら、画面の縦方向の長さ(スクロール)にかかわらず、いつも画面の下部にあります! z-index:z軸は私が何級あるかを設定します.たとえば、別の要素を上書きする場合は、z-indexが大きいほど要素が小さくなります.
私が使っている位置のタイプと基準点に注意してください!
static:すべての要素のデフォルトの位置値.最も一般的な状態
相対的に移動基準点は本人の元の場所です.floatのように親を離れることはありますが、自分の元の位置を記憶しているのでレイアウトは変わりませんし、崩れません.
absolute:floatと同様にブロックできない属性となり、親ブロックから離れる
しかし、floatとは異なり、inlineコンテンツはfloatの存在に気づかずに回避される.
それぞれ自分の道を歩く様子...
親に属するfloatとは異なりabsoluteの選択基準点は比較的自由である.
祖先要素が基準点となる場合、祖先要素の位置は相対的であることが望ましい.
固定:ほぼ絶対に等しい.違いがある場合は、ビューポートサイズが基準点です.
이미지출처: https://github.com/rohjs
概念はまだよく理解されていません.もっと訓練しなければならない.Reference
この問題について(Position), 我々は、より多くの情報をここで見つけました https://velog.io/@seul2ya/Positionテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol