The CSS Position Property: Everything You Need to Know

Understanding how CSS affects the alignment of on-page elements can improve your design skills and enhance the user’s experience on your website. Even the most basic webpage designs can look amazing and function properly with CSS. As your website project gets more detailed, issues with aligning on-page elements may arise, and using CSS to position them can speed up your workflow.

CSS allows different methods for positioning elements. The most common are position, float, and display. In this post, we'll explain how you can use the CSS position property 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 a beautiful webpage design.

Note these properties only work if the position property is already established. They will also be affected by the position value.

Position: Static

Source

Static positioning is the default for every HTML element. In fact, there’s not much that you can do to change it. It won’t be affected by certain properties that can make an impact on other CSS position types. No matter what value you associate with top, right, bottom, and left properties, they will not change, and neither will the z-index property.

Position: Relative

Source

At this value, the element follows the render flow but will be shifted relative to its initial position. To determine the amount of offset, set values for the top, right, bottom, and left properties. The other elements around the one in relative position aren’t affected, but there will be extra space where the element would have been.

The z-index value should be set to auto unless you want a new stacking context.  Essentially, this means you create a new set of layers that will be stacked based on that element.

Position: Fixed

Source

At this value, the element disregards the normal render flow. Instead, the element is positioned relative to the viewport (the area the user can see). It doesn’t move, even if the page is scrolled. There's no space left where it would have been located in the page layout.

Use the top, right, bottom, and left values to set the element's final position.

Using the fixed value automatically establishes a new stacking context.

Position: Absolute

Source

At this value, the element also ignores the normal document flow, but rather than being positioned according to the viewport, it’s positioned relative to the nearest positioned ancestor.  However, like the fixed value, there's no space created for it in the page layout.

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

Note: A positioned element is that which has property value relative, fixed, absolute, or sticky.

The values of top, right, bottom, and left determine the element's final position. If the value of z-index is not auto, it creates a stacking context.

Position: sticky

Source

The element's position is determined by the user's scroll. Depending on how far the user has scrolled, it behaves like a relative value element until the viewport meets a specified position — then it gets "fixed" in a spot.

It always creates a stacking context.

Keep in mind that using a framework like Bootstrap CSS would provide you these five classes, which are common in function with the CSS position property, and three additional classes for controlling the position of an element.

These additional classes are fixed top, fixed bottom, and sticky top. Let's briefly define each below.

• fixed-top: makes the element fix to the top of the screen, spanning from edge to edge
• fixed-bottom: makes the element fix to the bottom of the screen, spanning from edge to edge
• sticky-top: makes the element fix to the top of the screen, from edge to edge, after scrolling past the element

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 — with and without a framework like Bootstrap — let's take a closer look at the difference between absolute and relative positioning. 

While relative-positioned elements remain in the flow of the document, those with absolute positioning are taken out of the way and other elements on the page laid out as if the element wasn't there.

Here's an example of absolute CSS positioning:

Image Source

Now, here's an example of relative CSS positioning:

Image Source

Fixed CSS Position

The fixed CSS position is like absolute position with one difference: Unless any of the element's ancestors has its transform, perspective, or filter properties set to a value other than none, the initial containing block established by the viewport is the element's containing block. If set to none, the ancestor takes the place of the element's containing block.

This way, you can create a floating element that will gradually attain a fixed position where it will remain despite the scrolling.

Here's an example of fixed CSS positioning:

Image Source

Now that we've discussed the different position types and values, let's look at how you can put them to use on your website.

How to Position an Image in CSS

All of the same guidance regarding CSS positioning can be applied to styling images. Specifically, you'd define the image HTML as usual, adding any CSS class or ID selectors defining positioning.

Here's an example of how to position an image in CSS:

HTML:

 

 
   <img src="image.jpg" class="relative">

CSS:

 

 
.relative {
position: relative;
}

How to Position Text in CSS

Similarly, all the same guidance for CSS positioning can be applied to styling text. Specifically, you'd define the text's HTML formatting as usual, adding any CSS class or ID selectors to further define positioning.

Here's an example of how to position text in CSS:

HTML:

 

 
<p class="absolute">Your text goes here</p>
 

CSS:

 

 
.absolute {
position: absolute;
}

Applying Your Knowledge of CSS Position Property

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.