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.

Free Intro Guide to HTML & CSS [Download Now]

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

Example rendering of a static css position. Example text is shown within a box outlined in green.

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

Example rendering of a relative css position. Example text is shown within a box outlined in yellow.

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

Example rendering of a fixed css position. Example text is shown within a box outlined in dark blue.

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

Example rendering of absolute css position. Example text is shown within a box outlined in red.

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

Example rendering of a sticky css position. Example text is shows text moving as the screen scrolls while the header stays still.

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:

Absolute position code color coded
several blue boxes of txt with a yellow box of text over them to demonstrate absolute position

Image Source

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

Relative CSS position code color coded
several red boxes of text with a blue box of text slightly over one them to demonstrate relative position

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:

Fixed CSS position code color coded
Paragraph text with a blue box of slightly over the text to demonstrate fixed position

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.New Call-to-action

 css introduction

Originally published Jan 24, 2021 7:00:00 AM, updated January 25 2021

Topics:

Bootstrap & CSS