CSS Positioning

Use CSS positioning to specify how an element is positioned and where it should be located on the page.

The term "CSS positioning" typically refers to using the position property to specify how an element is positioned. For example, you can specify whether you want the element positioned relative to its natural position in the page, in an absolute position (taken out of the normal flow), in a fixed position, etc.

Relative Positioning

To perform relative positioning in CSS you use position:relative; followed by the desired offset from either top, right, bottom or left.

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    position: relative;
    left: 50px;
    background-color: gold;
    width: 90px;
  }
</style>

<p>Here is the normal flow of content...</p>
<div>
  This div has relative positioning.
</div>
<p>...and here is more content...</p>

This example offsets the element 80 pixels from the left of where it would have been. If we had specified top, it would appear 80 pixels below where it would have been. It's important to note that other elements are not affected by this element's offset. Therefore, overlapping may occur.

Absolute Positioning

To perform absolute positioning in CSS you again use the position property. Only, this time you use use position:absolute; followed by the desired offset.

Try it

Fixed Positioning

Fixed positioning allows you to fix the position of an element to a particular spot on the page - regardless of scrolling.

Try it