1.Position属性

cssの位置属性の相対と絶対の違いを理解します!
両者の違いを理解するには,まずpositionの基本属性staticを理解する.

1) static

staticは位置属性のデフォルト値であり、すべてのラベルは最初からstaticの状態にある.そのため、私たちはそれをposition: stactic;と書くことはありません.positionプロパティのないボタンを作成します.

/*position 속성을 부여하지 않은 버튼*/
        .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
        }

すると、次のようなボタンが生成されます.画像の線を切り取ってブラウザの上部を表示します.値が指定されていなくても、ボタンとブラウザの間に空白が表示されます.これがすべてのラベルがstatic状態にある証拠です!

2) relative

ボタンの位置を変えて白にしたいなら、position: relative;番に登場します.relativeは、staticの場合の位置を基準として値をとる.

/*position: relative속성을 부여하고 top: 100px; 로 지정해 주었다.*/ 
        .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position :relative;
            top: 100px;
        }

やはり上位ブラウザのウィンドウを一緒に切り取った.btn 1は静的状態でtop:100 pxである.どれくらい移動しましたか.

3) absolute

absoluteはstaticの属性値に制限されず、要素を位置決めすることができる.

/*position: absolute;  top: 100px을 부여해준 버튼 */
.btn2{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position : absolute;
            top: 100px;
        }

btn 2にはposition: absolute; top: 100px;が付与される.すると、ボタンは、ブラウザの上部100 pxから下に示すように位置します.

相対比較と絶対比較

対照的にtop:100 px;inボタンとabsolute top:100 pxボタンの位置が違いを感じにくいので同時に作成しました.btn1にはposition: relative; top: 100px;btn2にはposition: absolute; top: 100px;が付与されている.

       .btn1{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position :relative;
            top: 100px;
        }
        .btn2{
            all: unset; 
            background-color: cornflowerblue;
            color: white;
            padding: 5px 20px;
            border-radius: 20px;
            cursor: pointer;
            border-style: dotted;
            border-color: white;
            position : absolute;
            top: 100px;
        }

結果は、静的デフォルト値がある場合、top:100 pxである.移動するbtn1はbtn2よりも低いことが確認できます.

++を参照として、position: fixed; yoiも静的属性を備えず、基準点はブラウザの左上隅にある.

コメントリンク

https://engkimbs.tistory.com/922