WIL-CSS [Position]

41834 ワード

fixed sticky absolute position relative テキストリンク

💡 positionは「位置」の意味で要素の位置の属性を指定します.
このプロパティを使用して、ページのレイアウトを決定できます.

位置の種類

1. Static & relative & absolute
💡 静的は位置のデフォルトです.デフォルトでは、位置値を指定しないと静的値が得られます.したがって,htmlに書かれたタグの順序に基づいて位置を決定する.また、親オブジェクトに他の位置属性値がある場合、staticを使用してこれらの値を無視できる場合があります.
💡 相対とは「相対」の要素を指す.何に対して、自分の今の位置に対して.
ex) position: relative; 左:10 px;そうすると、自分が静止している位置から左へ10 pxの位置になります.
💡 absoluteはHTMLを基点とし、親要素に位置値を指定すると、親要素の位置に基づいて位置決めされます.これは親戚が静的な位置に気を配るような理屈だ.

<style>
        .box1 {
            position: static;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
        }

        .기준 {
            position: relative;
        }

        .box2 {
            position: absolute;
            left: 40px;
            top: 30px;
            background-color: green;
            color: white;
            width: 100px;
            height: 100px;
            z-index: 1;
        }

        .box3 {
            position: absolute;
            left: 50px;
            top: 50px;
            background-color: aqua;
            color: white;
            width: 100px;
            height: 100px;
        }
    </style>

<body>
    <div class="box1">box1</div>

    <div class="기준">
        <div class="box2">box2</div>
        <div class="box3">box3</div>
    </div>
</body>

2. fixed
💡 fixedはスクロール時に特定の箱を固定し、絶対属性です.
absoluteのように、固定も親を基準に位置づけられていますが、absoluteは親の要因によって位置づけられていますが、fixedは無条件に体を親と見なしています.この文は、現在のユーザが見ているビューポートを基準にして、画面に貼るように同じ位置に配置されます.

このように固定します.
3. sticky
💡 stickyは最近のスクロール要素に付着しています.
したがって、スクロールされた親要素がスクロール終了すると、stickyが終了し、次のstickyが開始します.これはsticky要素が受け渡し点に達するとoffsetが現れるという意味です.
💁 fixedとの違いは、次のとおりです.
固定はビューポートに固定でき、スクロールしても所望の位置に固定できます.これは粘性です.スクロール移動に伴いoffsetが受け渡し点に到達すると、その時点から固定が開始される.
最初はこんなに固定されていましたが、

受け渡し点にぶつかるとこうなります.

🤣 自分のキャラクターをポジションで作る！

 <style>
        body {
            margin: 150px;
        }

        .ear-left {
            position: absolute;
            top: 10px;
            left: 20px;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            transform: rotate(14deg);
        }

        .ear-left2 {
            position: absolute;
            top: 10px;
            left: 20px;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            transform: rotate(14deg);
            box-shadow: 8px 5px 5px gray;
        }

        .ear-right {
            top: 10px;
            right: 20px;
            top: 2px;
            position: absolute;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            transform: rotate(-14deg);
        }

        .ear-right2 {
            top: 10px;
            right: 20px;
            top: 2px;
            position: absolute;
            display: inline-block;
            background: #FFC8C4;
            width: 150px;
            height: 200px;
            border-radius: 30px;
            box-shadow: -8px 5px 5px gray;
            transform: rotate(-14deg);
        }

        .face {
            position: relative;
            background: #FFC8C4;
            width: 600px;
            height: 550px;
            border-radius: 300px;
        }

        .nose {
            position: absolute;
            top: 260px;
            left: 210px;
            right: 100px;
            background: #FC7CA5;
            width: 180px;
            height: 140px;
            border-radius: 180px;
        }

        .nose-left {
            background: #FFC8C4;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            position: absolute;
            left: 35px;
            top: 50px;
        }

        .nose-right {
            background: #FFC8C4;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            position: absolute;
            left: 100px;
            top: 50px;
        }

        .eye-left {
            position: absolute;
            background: black;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            left: 180px;
            top: 150px;
        }

        .eye-right {
            position: absolute;
            background: black;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            top: 150px;
            left: 360px;
        }

        .small-eye__left {
            position: absolute;
            background: white;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            left: 32px;
            top: 5px;
        }

        .small-eye__right {
            position: absolute;
            background: white;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            left: 32px;
            top: 5px;
        }


        .flower {
            position: absolute;
            background: yellow;
            top: 7px;
            left: 412px;
            width: 70px;
            height: 70px;
            border-radius: 35px;
            z-index: 5;
        }

        .small-flower1 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            top: -2px;
            right: 75px;
        }

        .small-flower2 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            top: -2px;
            right: 170px;
        }

        .small-flower3 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            right: 125px;
            top: -30px;
        }

        .small-flower4 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            top: 50px;
            right: 95px;
        }

        .small-flower5 {
            position: absolute;
            background: #F16585;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            right: 155px;
            top: 53px;
        }
    </style>
</head>

<body>
    <div class="face">
        <div class="ear-left"></div>
        <div class="ear-left2"></div>
        <div class="ear-right"></div>
        <div class="ear-right2"></div>
        <div class="nose">
            <div class="nose-left"></div>
            <div class="nose-right"></div>
        </div>
        <div class="eye-left">
            <div class="small-eye__left"></div>
        </div>
        <div class="eye-right">
            <div class="small-eye__right"></div>
        </div>
        <div class="flower"></div>
        <div class="small-flower1"></div>
        <div class="small-flower2"></div>
        <div class="small-flower3"></div>
        <div class="small-flower4"></div>
        <div class="small-flower5"></div>

    </div>
</body>

💡垂直、水平に揃えるコツ!!

垂直整列、top:50%、transform:trnslate(-50%)->Flexなし垂直整列

水平揃えの場合、余白:0 auto;->autoは左右の余剰エッジ値を分割し、自動的に中央に位置合わせします.
!! ただし、width値がない場合は動作しない

の位置を用いて50と-50を押す方法もあります.

💁_ 位置を勉强した后に相対と绝対を利用してキャラクターを作りました!!
位置を利用して自由に位置を調整でき、思ったほど迷いませんでした.
その前に、位置を調整したい場合は、無条件に相対を使って自由に位置を移動することができます.
offsetを食べていなかったので退屈で複雑でしたが、今回は正確な理解と使用位置の便利さを感じることができて快適でした!!

Reference

この問題について(WIL-CSS [Position]), 我々は、より多くの情報をここで見つけました https://velog.io/@codns1223/WIL-CSS-Position

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

データの符号化(1)の16進符号化

最初の開発ログ