The CSS Position Property: Everything You Need to Know

Learning CSS will improve your design skills and enhance the user experience on your website — even the most basic designs can look amazing and function properly with some CSS. As your website project gets more detailed, using the CSS position property will make your life much easier.

In this post, we'll explain how you can use position in CSS to edit the layout of your webpage. We'll explore different position types and review how you can position elements like text and images to create an engaging website.

What is the CSS position property?

The CSS position property is used to specify where an element is displayed on the page. When paired with the the top, right, bottom, and left CSS properties, the position property determines the final location of the element.

The position property can take one of several values: static, relative, fixed, absolute, and sticky. Let’s break down each value in detail with examples to see how each value affects a page element.

CSS Position Values

1. static
2. relative
3. fixed
4. absolute
5. sticky

static

Static is the default position for HTML elements. Elements with position: static are positioned based on the normal flow of the page, as you would expect them to be without any CSS styling. They are not affected by the top, right, bottom, or left properties. Z-index also does not apply to static elements.

In the example below, only div 2 is assigned position: static. However, you’ll see that its placement in the document is the same as if it did not have this property. You can delete the position: static from the CSS and the display will not change.

See the Pen CSS position: static by HubSpot (@hubspot) on CodePen.

Nothing too exciting here. Next, let’s see how we can change an element’s position from the default.

relative

When assigned position: relative, an element follows the render flow of the page, but will be shifted relative to its initial position.

To determine the amount of offset, you set values for the top, right, bottom, and/or left properties. Surrounding elements won’t be affected, but there will be space where the repositioned element would have been (in static positioning).

In this example, I’ve offset div 2 by 30 pixels down (with the top property) and 30 pixels to the right (using the left property). The repositioned div does not affect the position of surrounding elements.

See the Pen CSS position: relative by HubSpot (@hubspot) on CodePen.

When using position: relative, the z-index value should be set to auto unless you want to create a new stacking context. Essentially, a new stacking context means you create a new set of layers that will be stacked based on that element.

fixed

Elements with position: fixed do not adhere to the normal render flow of the document. Instead, fixed elements are positioned relative to the viewport — in other words, the part of the document that is currently visible in the browser.

Fixed elements do not move when the user scrolls, and, unlike relative, they do not leave a blank space where the element would have been positioned. You can use the top, right, bottom, and left properties to set the fixed element's final position.

Here, div 2 is offset by 30 pixels top and 30 pixels left, like in the last example. However, this time it is positioned relative to the viewport. Notice that there is no space where the element would have been on the page.

See the Pen CSS position: fixed by HubSpot (@hubspot) on CodePen.

Additionally, note that using the fixed value automatically establishes a new stacking context.

absolute

With position: absolute, an element ignores the normal document flow. However, instead of being positioned relative to the viewport (like with position: fixed), it’s positioned relative to the nearest positioned ancestor (a positioned ancestor is any element with a position value besides static, the default).

Here, div 2 is placed inside a container div (in gray) and positioned relative to the container, since the container is the nearest ancestor element of div 2.

See the Pen CSS position: fixed by HubSpot (@hubspot) on CodePen.

If there’s no positioned ancestor, the element is positioned relative to the containing block and moves with scrolling.

sticky

Elements with position: sticky are positioned depending on the user’s scroll. Depending on how far the user has scrolled down the page, a sticky element behaves like a relative element until the viewport meets a specified position. Then it becomes fixed in a spot and appears to “stick” to the page as the user scrolls.

In this example, scroll down and watch as div 2 goes from behaving like a relative element to a fixed element when it reaches the position top: 0 and “sticks” to the top of the viewport.

See the Pen CSS position: sticky by HubSpot (@hubspot) on CodePen.

Sticky elements always create a stacking context.

Keep in mind that using the Bootstrap CSS framework will provide you with these five values, as well as three additional classes for controlling the position of an element: fixed top, fixed bottom, and sticky top. If you're interested, you can check out the code and examples for each of these Bootstrap CSS position property classes.

Now that you understand the different ways you can change the position of an element, let's take a closer look at the difference between absolute and relative positioning.

CSS Position: Relative vs. Absolute

When an element's computed position value is defined as fixed or absolute, it assumes the absolute CSS position. When the computed position value is relative, it assumes the relative CSS position. In both cases, the top, right, bottom, and left properties specify the offsets from the element's position.

While relative-positioned elements remain in the flow of the document, absolute-positioned elements are taken out of the way of the other elements on the page. All other elements are positioned out as if the absolute-positioned element were not there.

The example below illustrated the difference between static, relative, and absolute positioning. In each gray box, the second paragraph element (highlighted in blue) is positioned differently.

See the Pen css position: relative vs absolute by HubSpot (@hubspot) on CodePen.

In the first box, the paragraph is static and appears as expected. In the second box, it is positioned relative to where it would have been in static positioning, shifted 40 pixels down and to the right. In the third box, the paragraph is positioned absolutely — in other words, it is placed relative to its parent element (the gray box container) and the other paragraph elements behave as if it weren’t in the document at all.

Applying Your Knowledge of CSS Position Property

The CSS position property is an advanced web design skill that will take practice to master. Bookmark this page and come back to it as you explore CSS position positioning on your website. When you’re ready for more, check out our Beginner’s Guide to HTML & CSS For Marketers.

Editor's note: This post was originally published in January 2021 and has been updated for comprehensiveness.