Positioning

This lesson discusses the positioning properties in CSS and how they affect the positioning and arrangement of elements on a web page.

Positioning

Static

The position property is used to set the positioning behavior of an element. The position property can be set to static, relative, absolute, fixed, or sticky. The static value is the default value and does not affect the position of the element.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of the position property. In this example, the position property of the <div> element is set to static, which is the default value.

Relative

A relative position is used to set the position of an element relative to its normal position. The element is positioned based on its normal position in the document flow, and then offset by the specified values.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

The code above shows an example of the position property with a value of relative. In this example, the position of the <div> element is set to relative, and the top and left properties are used to offset the element by 10 pixels.

Absolute

An absolute position is used to set the position of an element relative to its nearest positioned ancestor. If no ancestor is positioned, the element is positioned relative to the document body.

Item 1
Item 2
Item 3
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the position property with a value of absolute. In this example, the position of the <div> elements is set to absolute, and the top, right, bottom, and left properties are used to position the elements in the container.

Fixed

A fixed position is used to set the position of an element relative to the viewport. The element remains fixed in the same position on the screen even when the page is scrolled.

<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2 - Fixed</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the position property with a value of fixed. In this example, the position of the <div> element is set to fixed, and the top and right properties are used to position the element on the screen.

Sticky

A sticky position is used to set the position of an element relative to its containing block. The element remains in the normal flow until it reaches a specified scroll position, at which point it becomes fixed.

Item 1
Item 2 - Sticky
Item 3
<div class="container">
  <div class="item item1">Item 1</div>
  <div class="item item2">Item 2 - Sticky</div>
  <div class="item item3">Item 3</div>
</div>

The code above shows an example of the position property with a value of sticky. In this example, the position of the <div> element is set to sticky, and the top property is used to position the element on the screen.

More on Positioning

You can learn more about positioning by visiting the following links:

Code Editor