position in CSS

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>position</title>

    <style>

        .container{

border: 2px solid red;

width: 900px;

 height: 3444px;

 border-radius: 15px;      }

.box{

    border: 2px solid black;

    color:black;

    background-color: white;

    width: 100px;

    height: 100px;

    margin: 5px;

    float: left;

padding: 5px;

border-radius: 10px;

}

#box2{

    position: fixed;

}

#box3{

position:sticky;

top: 2px;

}

    </style>

</head>

<body>

    <div class="container">

    <div class="box" id="box1">1</div>

    <div class="box" id="box2">Chat With Us</div>

    <div class="box" id="box3">fruits 

        grapes

        orange

    </div>

    <div class="box" id="box4">4</div>

    </div>

</body>

</html>