In this section, we will learn what the position property is and how to use it in CSS.

Click here to run the example of position property.

CSS position Property Definition and Usage

In an HTML document, there’s a flow and each element in such a document is positioned based on that flow!

This means if there’s a <p> element in a document, it won’t appear randomly and unpredictably in that document every time it is rendered on a browser window!

Based on this flow, a <p> element has its own block and always appears at a new line in a document right after the last element of that document (if any).

But this is the default behavior and using CSS `position` property, we can change the way an element is positioned in an HTML document.

CSS position Property Syntax

position: static|absolute|fixed|relative|sticky|initial|inherit;

CSS position Property Value

Here’s the list of values that can be used for `position` property:

• static: this is the default value and makes the target element to follow the document’s normal flow.
• fixed: using this value, the target element is detached from the document’s normal flow as if it wasn’t on the page at all. This fixed element will be positioned at a higher level (even higher than floated elements) and if we scroll the page, they will stay where they are and won’t move.

The only way to change the position of a fixed element is by using `top`, `right`, `bottom`, `left` properties (Any CSS supported units can be used as the value for these properties).

The distance we make using `top, right, bottom and left` properties is relative to the device’s viewport, which is basically its containing block.

For example, “top:2em” means the top edge of the target element should be placed at 2em distance from the top side of the device’s viewport, or “left:25px” means the left edge of the target element should be placed at 25px distance from the left side of the device’s viewport.

Note: By setting these four values, we also implicitly declare the width and height of the target element. For example, specifying left:3em; right:3em means the left edge of the element will be 3em from the left side of the viewport, and the right edge will be 3em from the right side; thus, the element will be 6em less than the total width of the device’s viewport;

Example: fixed position in CSS

See the Pen fixed position in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS position Property Work?

As you can see, the form took the entire page without distorting the rest of elements on the page.

• absolute: just like “fixed” elements, using this value, the target element is detached from the document’s normal flow as if it wasn’t on the page at all. This absolute element will be positioned at a higher level (even higher than floated elements) but unlike fixed-elements, if we scroll the page, they will scroll as well.

In order to change the position of absolute-elements we use `top, right, bottom, left` properties just like fixed elements. BUT the distance we make using `top, right, bottom and left` properties is relative to the closest positioned ancestor element.

Positioned element means that element should have the `position` property, with the value either: “fixed”, “relative”, “sticky”, “absolute” but not “static”.

In the picture above, the target element’s second ancestor is positioned “fixed” and so the measurements are based on this element.

Note: If none of the element’s ancestors are positioned, then the absolutely positioned element will be positioned based on something called the “initial containing block”. This is an area with dimensions equal to the viewport size, anchored at the top of the page.

Example: absolute positioning in CSS

See the Pen absolute positioning in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

In this example, we’ve set the child element as an absolute element and placed it at a distance of 1em from the right side edge of its container (The one that is positioned as “relative”).

• relative: The target element that is positioned “relative” will follow the documents normal flow, but when we use `top, right, bottom and left` properties in order to change the position of the target element, the values for these properties will be based on the original position of the element itself.

Also, as the picture above shows, the position of other elements will not change if the relatively positioned element changes its position. (The red box was the original position of the relative element)

Note: Unlike fixed and absolute positioning, we cannot use `top, right, bottom and left` properties to change the size (width and height) of a relatively positioned element. These properties only shift the position up or down, left or right. Also, we can use `top` or `bottom` property but not together (the second one will be ignored); likewise, we can use `left` or `right` property but not together (the second one will be ignored as well).

Most of the time, the main reason we use “relative”, is to create a containing block for an absolute positioned element inside it.

Example: relative positioning in CSS

See the Pen relative positioning in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

• sticky: sticky positon is a hybrid version of “relative” as well as “fixed” positioning.

Like a relative positioned element, a sticky element follows the document’s normal flow.

But a sticky element becomes fixed in its position the moment it reached a certain offset.

This offset is set using `top, right, left, bottom` properties.

In the example below, we have used “sticky” as the value of the `position` property in order to stick a navigation bar at the 1em distance from the viewport’s top side. But when we run the example, it is clear that the current position of the navigation bar is far below than 1em from the viewport’s top side. Now, if we start to scroll down, the navigation bar will also scroll until it reaches the offset of 1em distance from the viewport’s top side. In that moment, it’ll become a fixed element and sticks to that position.

This is why we say “sticky” value is a hybrid version of “relative” and “fixed” values.

Example: CSS position property sticky value

See the Pen CSS position property sticky value by Omid Dehghan (@enjoytutorials1) on CodePen.

In short, until a “sticky” element reaches a specific offset, it acts just like a “relative” element, but the moment it met the offset, then it becomes a fixed element.

Note: A “fixed” element will stay in the position that we declare using `top, right, bottom, left` properties and it’ll stay there no-matter how long the page is or how much we scroll the page horizontally or vertically, but a “sticky” element sticks to its position as long as it doesn’t overflow its container element while we’re scrolling.

To enlighten the “overflow” part: You should know that while a sticky element sticks to its offset, its parent element won’t! And for that reason, when we scroll a page, the parent will follow the document’s flow and scroll as well and this will cause the bottom edge of the container element to reach the bottom edge of the sticky element at some point (if we scroll vertically of course). The moment this touch between the two edges happened, the stickiness of the sticky element will be gone and it’ll again follow the document’s normal flow.

Example: CSS position sticky

See the Pen CSS position sticky by Omid Dehghan (@enjoytutorials1) on CodePen.