DEV Community

Cover image for CSS Positioning Tutorial
Richard Rembert
Richard Rembert

Posted on • Updated on

CSS Positioning Tutorial

In CSS, we set the location of an element by using the position property.

For example:

.element {
  position: relative;
  top: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Our elements’ position will be moved down 10px from the top, relative to its original position in the document.

The position property can have one of 5 values:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Let’s take a look at each!

Values

Static

Every element has a static position by default. Static positioned elements are displayed in the normal page flow.

Let’s use the following HTML as an example:

<div class="parent">
  <p>parent</p>
  <div class="child">
     <p>child</p>
     <div class="element">
       <p>element</p>
     </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

And some basic CSS:

* {
  font-family: monospace;
  text-align: center;
  font-size: 24px;
}
.parent {
  background-color: red;
  padding: 40px;
  width: 500px;
  border: 2px solid #000;
}
.child {
  background-color: blue;
  padding: 30px;  
  border: 2px solid #000;
}
.element {
  background-color: green;
  padding: 30px;
  border: 2px solid #000;
}
Enter fullscreen mode Exit fullscreen mode

This gives us the following:
Basic CSS
We have our default static layout. The static position doesn’t need to be set as its assumed.

If we attempted to apply properties such top, bottom, left or right to a static element, there would be no effect.

Relative

An element with a relative position will also remain in the document flow, only now top, bottom, left & right will work!

These properties (known as “offset” properties) move element from the original position in the specified direction.

They accept any length value or a percentage.

Let’s add position: relative & left with an offset value of 100px to our element:

.element {
  /* other styles ... */
  position: relative;
  left: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Position CSS
Our element will move 100px from the left, relative to its container.

We could also set multiple values:

.element {
  /* other styles ... */
  position: relative;
  top: -200px;
  left: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Position CSS
The negative value for top moves box move up relative to its container.

You’ll also notice the space previously occupied by the element box still remains. As its position is offset relative to its original position.

We can also apply z-index to relatively positioned elements!

Absolute

When the absolute position is set on an element, it's completely removed from the document flow. Meaning all other page elements will behave as if it no longer exists.

Let's give our element a position: absolute, we can see that its original space has now collapsed, as the element exists outside of the document flow.

.element {
  /* other styles ... */
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Position CSS
We can use positional properties with an absolute element. So we can move it around using top, right, bottom, or left:

.element {
  /* other styles ... */
  position: absolute;
  top: 0px;
  left: 0px;
}
Enter fullscreen mode Exit fullscreen mode

Position CSS
It’ll position itself at the 0,0 coordinates of the browser window (the top-left corner).

Or:

.element {
  /* other styles ... */
  position: absolute;
  top: 250px;
  left: 100px;
}
Enter fullscreen mode Exit fullscreen mode

Position CSS
Our offset properties always set the position relative to the closest container that is not static.

If all parent containers are static, it’ll sit relative to the window.

But if we add position: relative to the .child element, and set the top and left to 0, the element will be positioned at the 0, 0 coordinates of .child:

.child {
  /* other styles ... */
  position: relative;
}
.element {
  /* other styles ... */
  position: absolute;
  top: 0px;
  left: 0px;
}
Enter fullscreen mode Exit fullscreen mode

Position CSS
This is a great trick to remember when positioning elements on a page!

You can also use z-index placement with absolute positioning.

Fixed

An element with a fixed value is similar to absolute in that it’s also removed from the flow of the document.

A fixed positioned element is always relative to the window itself, not any particular parent container:

.element {
  /* other styles ... */
  position: fixed;
  top: 0;
  left: 0;
}
Enter fullscreen mode Exit fullscreen mode

Position CSS
Also, fixed elements are not affected by scrolling. Meaning its position will stay the same even when the page is scrolled.

For example, you might use the fixed element to place a “scroll to top” icon at the bottom-right side of the page!

Sticky

The sticky value is a hybrid of the relative and fixed values. It’s treated like a relative value until the scroll location (of the viewport) hits a specified threshold. At that point it “sticks” in place, acting like a fixed element.

You might want a landing image with a navigation menu located underneath. As you scroll down past the landing image, you could have the menu then “stick” to the top of the window.

For example:

.element {
  position: sticky; 
  top: 0;
}
Enter fullscreen mode Exit fullscreen mode

Our element will be relatively positioned until the scroll location of the viewport reaches it. Then it’ll stick to the page in a fixed position at the top (0) of the screen.

At this stage, sticky remains an experimental value, with only partial adoption by the major browsers.

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)