Skip to main content

CSS Positioning

CSS positioning is a powerful tool that developers use to control where elements sit on a webpage. In this tutorial, we will explore some of the main CSS positioning properties and how they work.

What is Positioning in CSS?​

Positioning in CSS refers to the way in which elements are placed in relation to other elements on a webpage. There are five positioning properties in CSS:

  • Static
  • Relative
  • Fixed
  • Absolute
  • Sticky

Let’s explore each one in detail.

Static Positioning​

This is the default positioning for HTML elements. Elements are positioned in the normal document flow, meaning one after the other, as they appear in the HTML document. 

div {
  position: static;
}

Relative Positioning​

A relative positioned element is positioned relative to its normal position. If you set the top, right, bottom, and left properties, the element will move away from its normal position.

div {
  position: relative;
  left: 20px;
}

In the above example, the div will move 20px to the right of its normal position.

Fixed Positioning​

A fixed positioned element is positioned relative to the browser window. It will not move even if the page is scrolled. This is often used for navigation bars.

div {
  position: fixed;
  bottom: 0;
  width: 100%;
}

In the above example, the div will be fixed at the bottom of the page.

Absolute Positioning​

An absolute positioned element is positioned relative to the nearest positioned ancestor. If there is no positioned ancestor, it will position itself relative to the document body.

div {
  position: absolute;
  top: 50px;
  right: 0;
}

In the above example, the div will be positioned 50px from the top of its nearest positioned ancestor.

Sticky Positioning​

A sticky positioned element is positioned based on the user's scroll position. It toggles between relative and fixed, depending on the scroll position. It will be relative until a given offset position is met in the viewport, then it will "stick" in place.

div {
  position: sticky;
  top: 0;
}

In the above example, the div will start in its relative position, and when the user scrolls down, it will stick to the top of the viewport.

Conclusion​

CSS positioning is a versatile tool in your web design toolkit. It allows for a high level of control over where and how your elements are displayed on the webpage. Remember, each positioning property behaves differently and can be used for different purposes. So, it's up to you to decide which one to use depending on the layout you want to achieve. Keep practicing and experimenting with these properties to get a stronger understanding of how they work.