CSS Basics: The Position Property

Many developers use CSS without knowing its basics. When they need, for example, to position some element in the page, very often they try each possible value for the position property and see what works. This property is widely misunderstood by developers with not much experience in the frontend world. In this article, we will go back to the basics and understand how the position property really works.

Position static

This is the default value for the position property. Elements with position: static can’t have their x, y and z coordinates controlled. In other words, any change to the z-index, top, right, bottom or left properties won’t make any difference. An element with such position will just follow the normal flow of the page.

For example, let’s say we have a page with these two divs:

<body>
  <div class="circle"></div>
  <div class="square"></div>
</body>

And then we add some style to it:

.circle {
  background-color: salmon;
  border-radius: 50%;
}

.square {
  background-color: darkslategrey;
}

.circle, 
.square {
  width: 80px;
  height: 80px;
}

As previously explained, by default, these divs are statically positioned and our page will look like this:

Elements statically positioned

The .circle div comes first and is positioned at the top left corner of the page. Since divs are block-level, the second one (.square) causes a line-break and is placed immediately below the .circle div.

The following properties would have no effect at all:

.circle { 
  top: 100px; /* "top" won't make any difference here (as well as right, bottom or left) */
  left: 100px; /* does nothing */
  z-index: 2; /* the z-axis cannot be controlled on statically positioned elements */
}

Position absolute

The absolute positioning is the one that gives you the most control over an element. By using it, you can define exactly where that element should be vertically and horizontally (and let’s not forget the z axis). It won’t be part of the normal layout flow anymore, and will take up zero space on the page.

Let’s update our previous example. Now, what if we wanted our divs to be at 100px from the top and left, overlapping each other and the .circle div to be in front of the .square one? Absolute position can help us with that:

.circle {
  z-index: 2;
  background-color: salmon;
  border-radius: 50%;
}

.square {
  background-color: darkslategrey;
}

.circle, 
.square {
  position: absolute; /* <<<< */
  top: 100px; /* <<<< */
  left: 100px; /* <<<< */
  width: 80px;
  height: 80px;
}

By making the above adjustments, our page will look like this:

Absolutely positioned elements

How absolute position is calculated?

The position of an absolutely positioned element is calculated relatively to its closest non-static parent. If there is none, it is calculated relatively to the document body.

The shapes from our previous example have no non-static parents. Therefore, their position is calculated relatively to the document body:

Element whose position is relative to the document body

If we add a wrapper around these divs and set its position to anything but static, this wrapper will become the reference for the two shapes.

Check out the following example:

.shapes-wrapper { 
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
/* ^^^^^^^^^^^ */

.circle {
  background-color: salmon;
  border-radius: 50%;
  z-index: 2;
}

.square {
  background-color: darkslategrey;
}

.circle, 
.square {
  position: absolute;
  width: 80px;
  height: 80px;
}

The above code will produce the following result:

You might have noticed that, differently from the second example, in this one, we didn’t set the top and left properties for the shape divs. Even so, they’re not at the corner of the page anymore. Their new reference is the .shapes-wrapper div, whose position was set to absolute. Therefore, both shapes are positioned at the top left corner of this wrapper instead.

But, what if we had set a value for their top and left properties?

.shapes-wrapper {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: yellow;
}

.circle {
  background-color: salmon;
  border-radius: 50%;
  z-index: 2;
}

.square {
  background-color: darkslategrey;
}

.circle, 
.square {
  position: absolute; 
  top: 100px; /* <<<< */
  left: 100px; /* <<<< */ 
  width: 80px;
  height: 80px;
}

Here’s the result:

Now, our shape divs are positioned at 150px from the page’s top and left.

#css #web-development #programming #developer

Position static

Position absolute

How absolute position is calculated?

programmingwithmosh.com

CSS Basics: The Position Property