Relatively position elements in CSS

Positioning elements relative to their container is something that comes up often when writing CSS for a website. You might be trying to position a little triangle under hovered nav links, or place a badge in the top-right corner of your website, both of these are use-cases where you might need to position elements relative to other elements.

The technique to achieve this is relatively simple. Let’s say I want to position an orange square inside a gray container.

First the HTML:

<div class="container">
  <div class="orange-square">
  </div>	
</div>

Now the CSS:

.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: #2d2d2d;
}
.orange-square {
  position: absolute;
  width: 50px;
  height: 50px;
  background: orange;
  top: 10px;
  left: 50px;
}

The result:

See the Pen Positioning elements 1 by Adam Hollister (@aaahollister) on CodePen.

So you can see above that I’ve given the container position: relative, which sets the positioning context of the orange-square. Now we can take the orange square and give it position: absolute. Normally this would allow you to position this element relative to the body tag, but now it is being positioned relative to the container instead.

In the example above I’ve positioned the orange square ten pixels from the top and 50 from the left of the container, but you can also use percentages for more responsive positioning.

Try resizing your browser on this example:

See the Pen Positioning elements 2 by Adam Hollister (@aaahollister) on CodePen.

We can also use percentage values for the width of the orange square, and the width will be calculated as a percentage of the containers width.

See the Pen Positioning elements 4 by Adam Hollister (@aaahollister) on CodePen.

Using this technique to perfectly center elements

Now that we can position our orange square relative to the container, how can we get it to sit perfectly in the middle, regardless of the size or shape of the container?

You might think the answer is to set the left and top properties of the orange box using percentage values like this:

.orange-square {  
  top: 50%;
  left: 50%;
}

However the CSS above results in this:

See the Pen Positioning elements 3 by Adam Hollister (@aaahollister) on CodePen.

This is because when we position the orange square, the co-ordinates that are being assigned relate to the top left corner of the square, not the center.

We can overcome this problem by using CSS transforms to pull the box left and up by 50% of it’s height and width.

.orange-square {  
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Here we are using a CSS transform to translate the position of the orange square 50% of it’s width left and up (in that order) with translate(-50%, -50%).

See the Pen Positioning elements 5 by Adam Hollister (@aaahollister) on CodePen.


So now we can position an element relative to it’s container and place it where we want using position: absolute and the top, bottom, left and right properties. We can use percentage values instead of pixels for stretchier elements and more responsive positioning. Finally we’ve also learned how to use this technique combined with CSS transforms to perfectly and responsively center elements inside their container.