The Things You Should Know about CSS Positioning Properties

Cascading Style Sheets (CSS) is a powerful tool used to enhance the look and feel of web pages. One of the essential aspects of CSS is positioning. CSS positioning allows developers to position HTML elements exactly where they want them to be displayed on a web page. In this article, we will discuss the different types of CSS positioning properties and their usage.

Static Positioning

Static positioning is the default positioning property of HTML elements. In this type of positioning, the element is displayed in its normal position as defined by the document’s flow. Static positioning does not require any specific CSS property declaration.

See the Pen position static demo by Peter Lin (@peter-lin-the-bold) on CodePen.

Relative Positioning

Relative positioning allows developers to position an HTML element relative to its normal position. It is achieved by using the position: relative property. When this property is applied, it moves the element away from its original position, but the surrounding elements remain unaffected.

.box-outside {
  position: relative;
  top: 50px;
  left: 50px;
}

See the Pen position absolute and relative demo by Peter Lin (@peter-lin-the-bold) on CodePen.

Absolute Positioning

Absolute positioning allows developers to position an HTML element precisely where they want it to appear on a web page. It is achieved by using the position: absolute property. In this type of positioning, the element is positioned relative to its nearest positioned ancestor. If there is no positioned ancestor, then it is positioned relative to the initial containing block.

p {
  position: absolute;
  top: 20px;
  left: 30px;
}

See the Pen position absolute demo by Peter Lin (@peter-lin-the-bold) on CodePen.

If you want to understand how these work in detail, check my other post: Understanding the Difference between Position Absolute and Relative in CSS

Fixed Positioning

Fixed positioning is similar to absolute positioning, but the difference is that it positions the element relative to the viewport and not its nearest positioned ancestor. In fixed positioning, the element remains in the same position even when the user scrolls the web page. It is achieved by using the position: fixed property.

.fixed {
  position: fixed;
  top: 20px;
  left: 50px;
  width: 100%;
}

See the Pen position fix demo by Peter Lin (@peter-lin-the-bold) on CodePen.

Sticky Positioning

Sticky positioning is a relatively new addition to CSS. It allows developers to create a sticky element that remains fixed in its position until the user scrolls past it. After that, it acts like a relatively positioned element. It is achieved by using the position: sticky property.

.sticky {
  position: sticky;
  top: 20px;
}

See the Pen position sticky demo by Peter Lin (@peter-lin-the-bold) on CodePen.

Z-Index Property

The z-index property is used to specify the stacking order of positioned elements. It determines which element appears on top of the other. The element with a higher z-index value will appear on top of the element with a lower z-index value. It is achieved by using the z-index property.

Default: Templated from up to down.

See the Pen z-index deom origin by Peter Lin (@peter-lin-the-bold) on CodePen.

Add z-index: 1 to div one.

See the Pen z-index demo infront by Peter Lin (@peter-lin-the-bold) on CodePen.

FAQs

1. What is the difference between static and relative positioning?
   Answer: Static positioning is the default position of an HTML element, while relative positioning allows developers to position an element relative to its normal position.
   
2. How is absolute positioning different from fixed positioning?
   Answer: Absolute positioning positions an element relative to its nearest positioned ancestor, while fixed positioning positions an element relative to the viewport.
   
3. Can we combine different types of CSS positioning in a single element?
   Answer: Yes, we can combine different types of CSS positioning in a single element.
   
4. What is the purpose of the z-index property?
   Answer: The z-index property is used to specify the stacking order of positioned elements.
   
5. Is sticky positioning supported in all web browsers?
   Answer: No, sticky positioning is not supported in some older web browsers, but it has good support in modern browsers.

Conclusion

In conclusion, CSS positioning is a vital aspect of web development. It allows developers to position HTML elements exactly where they want them to be displayed on a web page. The different types of CSS positioning properties, including static, relative, absolute, fixed, and sticky, have unique characteristics that are useful in different web design scenarios. The z-index property is also essential in determining the stacking order of positioned elements.