position: sticky, fixed

9410 ワード
CSS テキストリンク 
<body>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div class="box box4"></div>
        <div class="box box5"></div>
        <div class="box box6"></div>
        <div class="box box7"></div>
        <div class="box box8"></div>
        <div class="box box9"></div>
        <div class="box box10"></div>
    </div>
</body>
.container{
    position: relative;
    top: 100px;
    left: 100px;
    background-color: beige;
    }
       
.box{
    width: 80px;
    height: 80px;
    background-color: chocolate;
    margin-bottom: 20px;
    }

sticky

.box2 {
    background-color: hotpink;
    position: sticky;
    top: 0px;
    left: 0px;
    }

  • stickyは親の動きに基づいてposition 프로퍼티(top, left..등)が必要です

  • スクロール時に既存の磁気ビットをロックする

    • fixed

    .box2 {
    background-color: hotpink;
    position: fixed;
    top: 0px;
    left: 0px;
    }

  • fixedのビューポートでの動作は親に関係ありません

  • 既存の位置から完全に離れてビューポートにナビゲート

    • iOS:URIの仕様のパーセンテージ符号化と復号化
    ssh統合シリーズブログ--(4)文字化け問題解決