CSS_Position

最近は自己紹介ページを作成する際に、HTMLやCSSが多く使われています.
CSSを使うたびに思いつくアイデアですが、その属性を理解して使っている人も多いのですが、スタイルがねじれ始めたら中に入れてみて当たってみます(?)状況も多いようです.今日は属性の位置を整理します.

positionプロパティとは?

positionは、ドキュメント内の要素を上から下に積み上げるか貼り付けるかを指定する属性です.

1. static

プロパティが指定されていない場合の値を示す一般的なドキュメント・フロー.
要素は左から右、上から下に順に積み重ねられます.
したがって、top、left、right、bottom、z-indexなどの位置を指定する属性は機能しません.

2. relative

まず、これらの要素をデフォルトのフローで配置します.
自分を基準に、上、左、右、下の値で位置を移動します.
しかし、元の位置に移動しても、残りのスペースに他の要素を加えることはできません.相対アトリビュートは、元の位置(移動前)でもスペースを占有します.

#box2 {
   position: relative;
   top: -10px;
   left: 10px;
}

3. absolute

通常のプロセスに従わず、ページレイアウトにスペースを割り当てません.そのため、相対的に異なり、他の要因と重なる可能性があります.
逆に、親要素では、指定した位置の要素(相対等)の上、左、右、下の値に基づいて相対的に配置されます.

#parent {
  position: relative;
}

# child {
  position: absolute;
  right: 0;
}

# absolute {
  position: absolute;
  right: 0;
}

左ボックスは相対属性を持つ親にあるため、親に基づいてright:0属性を適用して配置します.
逆に、右側のボックスには位置を指定する親要素がないため、bodyに基づいてright:0属性が指定されていることがわかります.

4. fixed

absoluteと同様に、通常のプロセスに従わず、ページレイアウトにスペースを指定しません.ブラウザがレンダリング時にソートすると、固定されたアトリビュートを持つ要素が除外されてソートされます.
absoluteが相対的な親に基づいて位置を指定している場合、fixedはブラウザ画面自体に基づいて位置を指定します.
通常、Webサイトでは、スクロールにかかわらず、タイトルが上部に固定されます.これは、画面上の位置を固定したい場合に使用されるプロパティです.
下図を見るとスクロール画面にも「I'm fixed!」その位置に固定されていることがわかります.

#fixed {
  position: fixed;
  top: 10px;
  right: 10px;
}

5. sticky

最初は静的属性を保持し、指定した標準値(top、left、right、bottom)を超えると、固定属性となり画面に固定されます.
逆に、stickyプロパティを持つ要素の親要素は、スクロールする要素でなければなりません.

#stick {
  position: sticky;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

最初の写真を見ると、スクロールする前に「I'm sticky」要素があなたの位置を占めているのが見えます.
スクロールするとtop:0を超えた瞬間から固定され、上にシールのように貼られています.

6. fixed vs sticky

HTML

<div id="box">
  <div id="fixed">fixed</div>
  <div id="stick">stick</div>
  hello <br>
  ...
</div>

CSS

#box {
  width: 300px;
  height: 300px;
  overflow: scroll;
}

#fix {
  position: fixed;
  top: 0;
  right: 0;
}

#stick {
  position: sticky;
  top: 0;
  right: 0;
}

固定要素ボックスで宣言しても、bodyを親要素として無条件に指定して、画面の一番右側にあることを確認できます.
ただしsticky elementは、スクロールした親boxからtop:0を指定し、boxの上部に付着します.
このブログを書く過程で、positionの属性をよく知ることができます.
いつか指摘しなくてはいけませんが、コードの作成に追われて遅れてしまいましたので、早めに整理すべきだと思います.
自己紹介ページも作りやすいのでは?🤦‍♂️
やはり好奇心のあることは後回しにしてはいけない.😎❗