位置合わせ

position

エンティティを配置する位置値.
例を用いてpositionのプロパティを理解します.

📌 例

<div class="first">
  first
</div>
<div class="parent">
  parent
  <div class="child">
    child
  </div>
</div>

.first {
  border: 2px solid red;
}
.parent {
  border: 2px solid red;
}
.child {
  border: 2px solid red;
}

次に、各領域にposition値を与えると、それらがどのように変化するかについて説明します.

📚 position: static

これはデフォルト値で、offset値を無視して元の位置に配置します.
child elmentにナビゲート:静的値を与えても、そのelmentは変化しません.

.first {
  border: 2px solid red;
}
.parent {
  border: 2px solid red;
}
.child {
  border: 2px solid red;
  position: static;
}

📚 position: relative

元の位置に対して位置決めします.
child elmentを左に100 px移動

.first {
  border: 2px solid red;
}
.parent {
  border: 2px solid red;
}
.child {
  border: 2px solid red;
  position: relative;
  left: 100px;
}

📚 position: absolute

親に位置を指定すると、その親に基づいて位置が指定されます.
既定値は元の場所で、親のメンバーではありません.
したがって、親のサイズには含まれず、自分のサイズもリセットされます.
親との関係が途切れて、自分の内容を拡大するだけで、親は自分に子供がいないと思っています.

<div class="first">
  first
</div>
<div class="grand">
  grand
  <div class="parent">
    parent
    <div class="child">
      child
    </div>
 </div>  
</div>  

.first {
  border: 2px solid red;
}
.grand {
  border: 2px solid red;
  position: relative;
}
.parent {
  border: 2px solid red;
}
.child {
  border: 2px solid red;
  position: absolute;
  background-color: black;
  color: white;
  left: 100px;
  top: 0;
}

child elmentはgrand elmentに基づいて位置値を決定します.
また、サブエンティティのサイズもリセットされ、コンテンツサイズのみになります.

📚 position: fixed

スクロールのプロパティとは異なり、スクロール時にも特定の位置に固定されます.
absoluteと同様に、コンテンツサイズのみを指定し、親と接続を解除します.

<div class="first">
  first
</div>
<div class="grand">
  grand
  <div class="parent">
    parent
    <div class="child">
      child
    </div>
 </div>  
</div>  

.first {
  border: 2px solid red;
}
.grand {
  border: 2px solid red;
}
.parent {
  border: 2px solid red;
}
.child {
  border: 2px solid red;
  position: fixed;
  background-color: black;
  color: white;
  left: 100px;
  top: 0;
}