CSSの位置|相対、絶対、固定を理解します!

9948 ワード
absolute html CSS fixed wecodefullstack4 relative テキストリンク
CSSレイアウトに関する質問に答えるとき、位置付けが難しい.これから使うことが多いと思いますので、整理してください.CodePen(クリック)で混同されるたびに、練習しながら熟知しなければならない.

ポジションとは?


htmlコードを作成すると、画面に順次表示されます.
でも順番がどうであれ、勝手にレイアウトを変えたい!
この場合、positionプロパティが使用できます.position属性の値は4種類あります.
  • position: static;
  • position: relative;
  • position: absolute;
  • position: fixed;
    • このうちposition: static;は一般的ではありません.
    よく使用されるrelative, absoluteおよびfixedについて説明します.

    1. position: relative

    position: relative単独で使用する場合は特別な機能はありません.
    したがって、この属性を持つ要素を移動するには、top、right、bottomおよびleftを同時に使用します.
    <!--html 코드-->
<body>
  <div>div</div>
  <div class="relative"> div.relative </div>
  <div class="relative topleft">
    div.relative.topleft<br><br>
    relative 속성일 때! top:50px left:30px이면! <br>
	부모요소 기준 위쪽으로 50px만큼 띄우고!!<br> 
    왼쪽에 30px만큼 띄우라는 뜻!!!
  </div>
 </body>
    /*css 코드*/
div {
  border: 1px solid red;
}
.relative {
  position : relative
}
.topleft {
  top : 50px; 
  left : 30px;
}
    👆 これらのコードを実行すると、

    👆 こんな結果になります!
  • topに負の値-を加えると、上に重ねられます.次に、CSS.topleft属性値をtop:-30pxに変更した結果を示す.

    👀 div.箱の底面に対して30 px重なっていますよね?

    • 2. position : absolute

    position: absoluteは、特定の要素に基づいて位置決めされ得る.
    この場合、標準はpositionがrelativeまたはfixedまたはabsoluteの親である.
    通常、親要素position:relativeが与えられます.
  • div要素の領域でp要素を右下隅に表示しようとした.
  • もしそうであれば、divに従って移動し、divタグに相対属性を提供し、pタグに絶対属性を提供する.
  • CSSright:0,bottom:0属性を使用して、次の操作を行います
  • 適用bottom:0属性がdiv領域の下部に完全に適合していない場合、pタグにmargin:0が適用される.

    • 注意事項1:親要因(絶対基準となる要因)の相対性を与える.つまり、絶対的なラベルは兄弟要素に相対的な属性を与え、兄弟要素は絶対的な基準ではない.
    注意事項2
    pはブロック要素であるため、幅値はそのままであれば親要素(例ではdiv)の幅になります.しかしabsoluteを適用した瞬間にはinline要素となるためpの幅がコンテンツの幅となる.
    <!--html-->
<body>
  <div class="relative"> 나는 div	
    <p class="absolute right-0"> 나는 p </p>
  </div>
</body>
    /*css*/
.relative {
  position : relative
}
.absolute {
  position: absolute;
}
.right-0 {
  right: 0;
  bottom: 0;
}

    3. position : fixed

    fixed要素をスクリーンに固定します.アップル公式サイトhttps://www.apple.com/に入り、スクロールしてもタイトルは固定されています.これらの部分はfixedで作られています.
    fixedを使用して簡単な学習を行います.
    header {
 position:fixed;
 left:0;
 right:0;
 top:0;
 height: 48px;
 background-color: rgba(45,45,45,0.95);
}
  • を必要なコレクタ(ex.header)position:fixedに適用します.
    • 場所は、
  • top、right、bottomおよびleftを使用して適用されます.
    ex.left: 0ブラウザの左側から0であることを示します.

    • 参考資料


    https://learnlayout.com/no-layout.html
    https://poiemaweb.com/css3-layout
    https://poiemaweb.com/css3-box-model
    2つの[Python]キーをRamda式でソート
    TIL86. Codekata(11)