CSS Position Property - static, relative, absolute, fixed and sticky

        

          

          
          

          

              

                  
              

          



  



Introduction to Position Property in CSS



The `position` property in CSS is a powerful tool that grants you control over element placement, allowing you to move them beyond the natural document flow and position them anywhere on the page.



Different Positioning Methods



    
  
  • Static (default): Elements follow the document flow like obedient citizens on a sidewalk.
    • 
  
  • Relative: Elements move slightly within the flow, like someone taking a detour.
    • 
  
  • Absolute: Elements break free, positioned anywhere on the page like a bird in flight.
    • 
  
  • Fixed: Elements stick to the screen like a stubborn tree in a storm, staying put even while scrolling.
    • 
  
  • Sticky: Elements stick to the viewport (often the top) like magic tape, then smoothly transition into the flow.
    • 




Unleashing the Power: Use Cases



    
  
  • Overlays: Pop-ups, modals, and dropdowns positioned absolutely.
    • 
  
  • Fixed Navigation: Bars and sidebars that stay in place while scrolling.
    • 
  
  • Sticky Headers/Footers: Elements that stick to the viewport for consistent user experience.
    • 
  
  • Interactive Elements: Precisely positioned buttons, menus, and other interactive components.
    • 
  
  • Visual Interest: Overlapping elements, z-index depth, and creative positioning for visual appeal.
    • 









HTML Code for demo on Relative Positioning


 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Basics</title>
      <link rel="stylesheet" href="test.css">
  </head>
  <body>
  <!-- css --> 
  <div class="parent">
    This is parent
    <div class="child1">
       This is child 1
    </div>
    <div class="child2">
      This is child 2
    </div>
    <div class="child3">
      This is child 3 
    </div>
  </div>
  </body>
  </html> 








CSS code for Relative Positioning


 .parent
  {
     background-color: aqua;
     width: 400px;
     height: 700px; 
     position:relative;
     top:100px;
  }
  .child1
  {
      background-color: antiquewhite;
      width: 200px;
      height: 200px;
  }
  .child2
  {
     background-color:blue;
     width: 200px;
     height: 200px;
  }
  .child3
  {
     background-color:brown;
     width: 200px;
     height: 200px;
  } 

  

  



    
Output

    image of a webpage
  

    



  
CSS code for Relative Positioning - Child Element


 .parent
  {
     background-color: aqua;
     width: 400px;
     height: 700px; 
     position:relative;
     top:100px;
  }
  .child1
  {
      background-color: antiquewhite;
      width: 200px;
      height: 200px;
  }
  .child2
  {
     background-color:blue;
     width: 200px;
     height: 200px;
     position:relative;
     left:200px;
  }
  .child3
  {
     background-color:brown;
     width: 200px;
     height: 200px;
  } 

  

  

  

    
Output

    image of a webpage
  

  

  
  
  
CSS code for Absolute Positioning 

  
 .parent
    {
       background-color: aqua;
       width: 400px;
       height: 700px; 
       position:relative;
       top:100px;
    }
    .child1
    {
        background-color: antiquewhite;
        width: 200px;
        height: 200px;
    }
    .child2
    {
       background-color:blue;
       width: 200px;
       height: 200px;
       position:absolute;
       left:200px;
       top:50px
    }
    .child3
    {
       background-color:brown;
       width: 200px;
       height: 200px;
    }
     

     

     

     

      
Output

      image of a webpage
    

    

    

    
CSS code for Fixed Positioning 

  
 .parent
    {
       background-color: aqua;
       width: 400px;
       height: 700px; 
       position:relative;
       top:100px;
    }
    .child1
    {
        background-color: antiquewhite;
        width: 200px;
        height: 200px;
    }
    .child2
    {
       background-color:blue;
       width: 200px;
       height: 200px;
       position:fixed;
       left:200px;
       top:10px
    }
    .child3
    {
       background-color:brown;
       width: 200px;
       height: 200px;
    }     

    

    

    

      
Output

      image of a webpage