POSITION PROPERTY IN CSS #2 ( CSS Tutorial #21 )

Today we will study about relative position in CSS.
Yesterday we studied about Fixed Position in css and by using that we were able to use top , right , left and bottom property as well.

SO let's talk about relative property in css. In this a element is positioned relatively with the normal postion.
Also a element can be positioned relatively even after the page change it's dimensions.

This is the key difference that you can relatively change position with the change in the size of the screen as well.

Steps to implement :

Step 1: create a html layout as usual.

Step 2: write following code inside the style tag.

Screenshot from 2020-11-12 23-00-09.png

Step 3: run the file and see the result:

1...)

Screenshot from 2020-11-12 22-59-53.png

2...)

Screenshot from 2020-11-12 22-59-56.png

You can see that the blurt div is fixed with the description for @sct.blurt while the last div on scrolling to left changes the position accordingly.

Full Code :

  <!DOCTYPLE HTML>
 <html>
<head>
<meta charset="utf-8">
    <title>FLOATinG</title>
<style>
    .bluebox{
        color: floralwhite;
        height: 50px;
        background-color: #3B5998;
        width: auto;
        text-align: center;
        position: fixed;
        top:120px;
        left:25px;
            
        
    } .boxliliput{
        color: palegreen;
        height: 250px;
        background-color: #232A34;
        /*position: absolute;*/
        top: 50px;
        left: 100px;
     /*   z-index: 4;*/
        
        
    } .brownbox{
        color: black;
        height: 50px;
        background-color:  #B49569;
        position: relative;
        top: 20px;
        left: 20px; 
        
        
        
    }
    .substyling{color: red;
    background-color: bisque;
    }

</style>
</head>
<body>
<div class="bluebox">
    <p><br/>  <b> BLURT </b>                                        </p>
   </div>
  <div class="boxliliput">
 <p> <b>DESCRITION :</b>    </p> 
 <p col> Hello @sct.blurt ,<span class="substyling"> Welcome.</span></p>
 </div>
 <div class="brownbox">
 <p>Alread a Member than what are you doing here....!</p>
</div>
 </body></html>

Thats all for this tutorial. write your queries down in the comments.

POSITION PROPERTY IN CSS #2 ( CSS Tutorial #21 )

Link For Previous Tutorials