CSS Position Static Relative Fixed Absolute Sticky Examples

Positioning Elements with CSS: Mastering Static, Relative, Fixed, Absolute, and Sticky

Forget metaphors, dive straight into the practical world of CSS positioning! This guide empowers you to control element placement on your webpages using different positioning properties: static, relative, fixed, absolute, and sticky.

Understanding the Options

1. Static (default): Elements follow the normal document flow, stacking vertically based on their order in the HTML code.
   
   
2. Relative: Elements stay in their initial position, but you can offset them using properties like top, right, bottom, and left. Offsets are relative to the element’s original position.
   
   
3. Fixed: Elements are removed from the normal document flow and positioned relative to the viewport (browser window). They stay in the same position even when you scroll.
   
   
4. Absolute: Elements are removed from the normal flow and positioned relative to their nearest positioned ancestor (or the viewport if none exists). Absolute positioning allows flexible and complex layouts.
   
   
5. Sticky: Elements behave like relative elements initially, but become fixed when scrolled past a certain point. Think of a navigation bar sticking to the top of the page as you scroll down.
   
   

Code Examples

HTML

<div class=”container”>

  <div class=”static”>I’m static, following the flow.</div>

  <div class=”relative”>I’m relative, moved 20px down.</div>

  <div class=”fixed”>I’m fixed, always visible top right.</div>

  <div class=”absolute”>I’m absolute, positioned 50px from top and left.</div>

</div>

CSS

.container {

  position: relative; /* Set a reference point for absolute positioning */

}

.static {

  background-color: #f5f5f5;

  padding: 20px;

}

.relative {

  background-color: #ccc;

  padding: 20px;

  position: relative;

  top: 20px;

}

.fixed {

  background-color: #007bff;

  color: white;

  padding: 20px;

  position: fixed;

  top: 0;

  right: 0;

}

.absolute {

  background-color: #ff9900;

  color: white;

  padding: 20px;

  position: absolute;

  top: 50px;

  left: 50px;

}

Remember

• Choose the positioning property that best suits your layout requirements and desired element behavior.
• Experiment with combinations to achieve complex layouts.
• Consider potential performance implications of fixed and absolute positioning.
• Practice accessibility guidelines for users with assistive technologies.

By mastering these positioning properties, you unlock the power to create dynamic and well-structured web page layouts, taking your design skills to the next level!

Go back to tutorial