Sunday, 16 May 2021

CSS Positions: Fixed vs Sticky

1
2
3
4

Code

<style>
    .container {
        background-color: aquamarine;
        height: 200em;
        width: 100%;
        border: 1px solid black;
    }
    
    .box {
        height: 100px;
        width: 100px;
        background-color: cadetblue;
        border: 1px solid green;
        display: inline-block;
    }
    
    #box-3 {
        position: fixed;
        top: 20px;
        left: 100px;
    }
    
    #box-4 {
        margin-top: 20vh;
        margin-left: 50vw;
        position: sticky;
        top: 80px;
    }
</style>

<body>
    <div class="container">
        <div class="box" id="box-1">1</div>
        <div class="box" id="box-2">2</div>
        <div class="box" id="box-3">3</div>
        <div class="box" id="box-4">4</div>

    </div>
</body>

0 comments:

Post a Comment