CSS property (Part.2 position)

Webと技術の発展に伴い、Webドキュメントをよりきれいにするために、レイアウトが複雑になり、属性も発展し、変化し始めた.
そこで、CSSでより複雑なレイアウトを作成するためのpositionプロパティについて説明します.position属性使用値は4種類あります.

position: startic;

position: relative;

position: absolute;

position: fixed;

1. static

staticがデフォルトです.position: startic;設定されたレイヤーは、特別な方法で位置を指定しているわけではありません.
静的(static)elmentは、位置が指定されているのではなく、他の値で指定されたelmentが位置を表す.
しかも、現在はあまり使われていないstatic

2. relative

staticそれ自体は特に意味がない.どこにも移動しません.
ただし、属性値を使用して位置を指定できます.

上の図に示すように、元の位置から移動するには、変更可能な位置の属性値(top、bottom、right、left)が必要です.
top、bottom、right、leftはposition: relative;という属性値にのみ適用されます.

3. absolute

position単語でも分かるように、絶対値を持つ要素です.position: absolute;属性の中で最も扱いにくい位置指定.
絶対的な位置づけは、どんな基準なのか、特定の親に対する絶対的な行動です.△この点を除いて、動作は後で習う固定動作と似ている.
親の中にposition李position・relative・fixed・・いずれも親に対しては絶対に動けます.(指定された位置エンティティは、静的に指定されたエンティティではない位置を指していることを覚えておいてください.)
絶対位置の親要素が指定されていない場合は、ドキュメント本文(documentbody)に基づいて移動します.
(一般的に使用するabsoluteの場合、絶対移動したい親要素を付与するabsolute属性.)

.relative {
  width: 500px;
  height: 100px;
  position: relative;
  background-color: yellow;
}
.absolute {
  width: 500px;
  height: 100px;
  background-color: green;
  position: absolute;
  top: 120;
  left: 70;
}

4. fixed

position: relative;その名の通り、固定の意味です.fixedいる必要があるabsolute親がいるrelativeいらない.
固定(fixed)要素は、ビューポート(viewport)に対して位置を指定します.これは、ページがスクロールしても常に同じ位置にあることを意味します.
fixedは画面内のみ移動し、表示されるブラウザの画面サイズと同じサイズです.

.fixed {
  width: 200px;
  height: 100px;
  position: fixed;
  background-color: gray;
  right: 300px;
  bottom: 500px;
}

以上のコードは、fixedエレメントをセットするコードです.fixed・relativeと同様に、上部または右、底、左の輪郭(属性)を使用します.