POSITION PROPERTY IN CSS #1 ( CSS Tutorial #20 )

let us talk about the position properties in css.
so position property is used to define the position type for a particular element.
By default the position is static.

Today let us learn about fixed positions in css. fixed position will keep the element fixed to its position relative to the webpage and even if the page is scrolled it won't change it's position.

let us see step by step how you can define a element to be a fixed position element.

Just we will be using the old code and make some changes to it.
Final Output :

Screenshot from 2020-11-11 22-19-11.png

Step 1: create a html layout as usual.

Step 2: write following code inside the style tag , the only change is that we have set position as fixed and top and left are define.

Screenshot from 2020-11-11 22-15-38.png

Step 3: run the file and see the result:

Screenshot from 2020-11-11 22-19-11.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: 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>

Just focus on the position property for now , i will talk about others in upcoming tutorials.

That's it you must have noticed the difference. yesterday the description for @sct.blurt was below the blurt div and today it is not the case.

Thank You.

Link For Previous Tutorials

Sort Order:

Trending

[-]

blurtcurator · 4 years ago ·

Congratulations! This post has been upvoted by the @blurtcurator communal account,
You can request a vote every 12 hours from the #getupvote channel in the official Blurt Discord.Don't wait to join ,lots of good stuff happening there.

0.00 BLURT

$0.00