Position & Float

Position

1. relative
1) block, inline, inline-block
    HTML要素は基本的にblock、inline、inline-blockレベルに分けられます.block要素は作成するたびに新しい行から始まります.逆に、inline要素は同じ行にリストされるように作成されます.span,a,imgなどが代表的である.
代表的なブロック要素を作成するtagにはdiv,pがある.
  Inline-blockは、この2つのプロパティを同時に有し、inline要素inline-blockプロパティを付与することによってレイアウトを実行します.inlineプロパティにはpadding、border、marginはありません.なぜなら、inline blockにblockを適用すると、これらのプロパティに値を割り当てることができるからです.
2) normal-flow
cssは基本的にHTML要素をcss boxとして扱う.これをcssboxモデルと呼ぶ.上記の要素は基本的にblockまたはinline属性を有し、ページ上部から下部に自然に位置決めされたストリームをnormal-flowと呼ぶ.cssは、これらの要素をboxとして処理し、これらのプロセスから抜け出し、これらの要素を自由に移動させることができる.
position値は、通常、1つの要素に対して設定され、ボックスに対応するoffset値(top、right、bottom、left)を調整してページ上の要素の位置を移動することができる.相対とは、要素が元のプロセス内の位置を調整することを意味します.例えば、相対位置要素にtop: 50pxを割り当てると、要素は元の位置から50 px以下に移動する.このとき、他の要素の動作は、基本ストリーム内の要素が同じ位置にあるようにします.
2. Absoulte
最初はposition: absoulte属性を理解するのは難しい.absoulteの意味と要素移動の特性があまり調和していないからです.どうして欠席したのですか.いろいろ考えました.今名前を変えたほうが分かりやすいと思います.
とにかく.absoulteプロパティが最も大きな違いは、この値を受け入れる要素がHTML normal-flowから削除されることです.他の要素の動作はnormal-flowに存在しないようにします.そのため、他の要因と重なる可能性もあります.たとえば、位置属性(静的を除く)が付与された祖先要素を「ロック」と呼ぶことがある.abullte要素は位置値が与えられた祖先要素に埋もれてしまうため、オフセット値は祖先要素を基準にabulte要素を移動します.

<div>
  <ol>
      <li>1번</li>
      <li>2번</li>
      <li>3번</li>
  <ol>
</div>

// 보기편하게 아래에 둠
<style>
    ol {
    position: relative;
    }
    
    li: last-child {
    position: absoulte;
    top: 10px;
    }
</style>

上記のpseudo-codeの設定に従って、liの最後の要素は親olにロックされるため、ol要素に対して10 px下に移動します.この場合、li margin値によって1番liとオーバーラップしてもよいし、オーバーラップしなくてもよい.
olではなく、親要素divにposition: relativeの値が与えられている場合、3番liはdiv要素にロックされ、div要素の位置を基準に移動します.Liはolを離れてdiv要素を基準に移動できます!
3. Fixed
fixedはabsoulteの一種ですが、viewport、すなわちユーザーが見ているブラウザ画面全体をロックします.

Float

floatは主にテキストを囲む画像に用いられる.flex以前はレイアウトによく使われていました.しかし、float属性を持つ要素は、親がその高さを認識できないために親を離れることがある.float要素container tagに簡単に適用します.clearffixクラスを追加し、overflow:hidden値を付与します.
最近flexとgridを使ってlayoutをたくさん捕まえているので、floatはあまり使いません.