position

Position

静的(既定)

htmlに書き込まれたタグ順に位置を指定し、順番に表示します.
場所を指定しない場合、デフォルトはposition: staticです.

<div class="box box1">box1</div>
<div class="box box2">box2</div>

.box{
  color:white;
  width: 100px;
  height: 100px;
}
.box1{
  background-color: green;
}
.box2{
  position:static;
  background-color: red;
}

relative

static 자리를 기준で指定された場所に移動します.
box 2の静的位置は上が静的参照
静止位置を基準として、頂部から10下がり、左側から40下がります.

<div class="box box1">box1</div>
<div class="box box2">box2</div>

.box{
  color:white;
  width: 100px;
  height: 100px;
}
.box1{
  background-color: green;
}
.box2{
  position: relative;
  background-color: red;
  left: 40px;
  top: 10px;
}

absolute

祖先要素のデフォルトの位置:静的以外の祖先に最も近い位置に移動します.
すべての祖先要素がposition:staticである場合、それらは自分の箱に基づいて指定された位置を移動します.
box 1-child-schildは、位置が静的ではなく、最近の祖先がbox 1であるため、box 1(緑を基準に左から100 pxに下がる)を表す.
box 2−schildは、box 2−schildのbox 2−schildタグに基づいて移動する.なぜなら、すべての祖先要素の位置は静的であるからである.

<div class="box box1">
  <div class="box box1-child">
    <div class="box box1-child-child">box1-child-chlid</div>
  </div>
</div>
<div class="box box2">
  <div class="box box2-child">box2-child</div>
</div>

.box{
    color:white;
    width: 100px;
    height: 100px;
}
.box1{
    position: relative;
    background-color: green;
}
.box1-child-child {
    position: absolute;
    left: 100px;
    background-color: violet;
}
.box2{
    background-color: red;
}
.box2-child {
    position: absolute;
    right: 0;
    background-color:black;
}

fixed

ビューポートを固定し、ビューポートをスクロールし続けます.ビューポートはデータムなので、常にその位置を維持します.
box 2の長さは自分の両親boxの1000 px(青に準じて)を超えているが、常に左20 px、上50 pxの位置に保たれている.

<div class="wrap">    
    <div class="box box1">box1</div>
    <div class="box2-wrap">
        <div class="box box2">box2</div>
    </div>
    <div class="box box3"></div>
</div>

.wrap {
    height: 2000px;
}
.box{
    color:white;
    width: 100px;
    height: 100px;
}
.box1{
    background-color: red;
}
.box2-wrap {
    height: 1000px;
}
.box2{
    position: fixed;
    left: 20px;
    top: 50px;
    background-color: green;
}
.box3{
    top: 1000px;
    background-color: cadetblue;
}

sticky

親箱を基準に固定し、親箱の位置まで転がして同じ位置を保ち、親箱をひっくり返すと消えてしまいます.
box 2は自分の親箱の長さ1000 px(青基準)を超えるまで位置が固定されており、降りるときに親箱をひっくり返すと消えてしまいます.

<div class="wrap">    
    <div class="box box1">box1</div>
    <div class="box2-wrap">
        <div class="box box2">box2</div>
    </div>
    <div class="box box3"></div>
</div>

.wrap {
    height: 2000px;
}
.box{
    color:white;
    width: 100px;
    height: 100px;
}
.box1{
    background-color: red;
}
.box2-wrap {
    height: 1000px;
}
.box2{
    position: sticky;
    left: 20px;
    top: 50px;
    background-color: green;
}
.box3{
    top: 1000px;
    background-color: cadetblue;
}