POSITION PROPERTY IN CSS #3 ( CSS Tutorial #22 )

Let's talk about absolute property today.
make sure to go and check the previous two lectures for position.

so let me tell about the absolute property. absolute property elements are positioned relative to the nearest element above it.
This element must also have a position other than static.

So let us implement the code and see the output.

Final Output :

Screenshot from 2020-11-13 21-27-41.png

Step 1: create a html layout as usual.

Step 2: write following code inside the style tag.

Screenshot from 2020-11-13 21-27-53.png

Step 3: run the file and see the result:

Screenshot from 2020-11-13 21-27-41.png

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: 150px;
        left: 100px;
     /*   z-index: 4;*/
        
        
    } .brownbox{
        color: black;
        height: 50px;
        background-color:  #B49569;
        position: relative;
        top: 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>

So you see how these three positions used together changed the view of our webpage. you must see the previous two lectures to see the difference.
Anyways write your queries down in the comments.

Thank you

POSITION PROPERTY IN CSS #3 ( CSS Tutorial #22 )

Link For Previous Tutorials