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が大きいほど要素が小さくなります.
    이미지출처: https://github.com/rohjs
    概念はまだよく理解されていません.もっと訓練しなければならない.