The CSS Position Property: Everything You Need to Know

For even the most basic webpage designs, it's important to understand how CSS deals with the alignment of on-page elements. Knowing how to position elements properly with CSS can save a lot of time as your project gets bigger and potential alignment issues arise.

In this post, we'll explain how you can use the CSS position property to edit your page's layout. We'll explore different position types and review how you can position elements like text and images to create an ideal webpage design.

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

CSS allows different methods for positioning elements. The most common are position, float, and display.

Position: static

You don’t necessarily need to call out static positioning, as it’s the default for every HTML element.

In fact, there’s not much that you can do to change it. To be more specific, 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 — neither will the z-index property.

Position: relative

At this value, the element follows the render flow, but will be shifted relative to its initial position.  You would determine the amount of offset by setting values for the top, right, bottom, and left properties. Other elements aren’t affected, but there will be 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

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

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

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.

Please note 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;
}

To really understand CSS position property, allow yourself time to practice. This hands-on experience with the techniques will help you understand them more thoroughly.