Positioning Mastery: A Beginner’s Guide to CSS Positioning Properties

A closer look at positioning properties in CSS

Photo by Valery Fedotov on Unsplash

Relative Positioning: Shifting Elements from Their Original Place

The position: relative; property allows you to move an element from its original position in the document flow without affecting the layout of surrounding elements. You can use the top, right, bottom, and left properties to specify the distance the element should be moved.

Example:

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

In this example, the <div> element will be moved 20 pixels down and 30 pixels to the right from its original position. Use relative positioning when you want to make small adjustments to an element’s position without disrupting the overall layout.

Absolute Positioning: Pinning Elements to a Specific Location