TIL Position

3227 ワード
CSS position テキストリンク

📌 Position - relative, absolute, fixed


#relation:元の位置に対する移動値

       div {
         position: relative;
         right: 50px;
       }
    -> 원래의 위치에서 오른쪽으로 50px이동한다.

#absolute:親の行動に基づく

  • 親のうち、相対的、固定的、絶対的な位置がある場合は、その親を基準に移動します.
    ->通常は標準となる親に対して
    ->absoluteで決定された値はcontentの位置と同じです.block要素もinlineのように
    • に見えます.

    #fixed:必要な位置に固定

  • を上下にスクロールするときにその位置に固定される属性
    • 
header{
  position: fixed;
  left: 0;
  right:0;
  top:0;
  height: 48px;
  // ! body에 padding-top을 주어서 content와 떨어지게 만들 수 있음
  background-color: rgba(45,45,45,0.95);
}

img{
// img는 header(fixed)를 기준으로 정렬됨
  position:absolute;
  left: 50%;
  margin-left: -10px;
}

    📌 Display : inline, inline-block, block

  • Block:幅と高さを設定可能
  • 行:幅と高さは設定不可、コンテンツサイズと長さのストリーム
  • Inline-block:inlineのように横に内容が表示され、幅と高さの値が与えられます.

    • 📌 Float

  • ウォンで左右に移動できる.静的および相対的な場合にのみ、幅を指定する必要があります.
  • の場合、float属性を有する他のシンボルと重ならないようにclear属性を用いてブロックすることができる.
    • 検索犬のテスト問題、復号と符号化について
    文字コードとは