7.3 CSS position

The CSS position property is versatile and powerful. It allows to set or alter an element’s position. It has 4 possible values:

• static (default value)
• relative
• absolute
• fixed

It’s often used alongside the 4 coordinates properties:

• left
• right
• top
• bottom

static

This is the default position value: static elements just follow the natural flow. They aren’t affected by any left, right, top or bottom value.

relative

When the position is set to relative, an element can move according to its current position.

<p>Well, Ja should know his own business, I thought, and so I grasped the spear and clambered up toward the red man as rapidly as I could - being so far removed from my simian ancestors as I am</p>
<p>I imagine the slow-witted sithic, as Ja called him, suddenly realized our intentions and that he was quite likely to lose all his meal instead of having it doubled as he had hoped</p>
<p>When he saw me clambering up that spear he let out a hiss that fairly shook the ground, and came charging after me at a terrific rate</p>

p{ border: 1px solid blue;}

Let’s move the second paragraph:

<p>Well, Ja should know his own business, I thought, and so I grasped the spear and clambered up toward the red man as rapidly as I could - being so far removed from my simian ancestors as I am</p>
<p class="second">I imagine the slow-witted sithic, as Ja called him, suddenly realized our intentions and that he was quite likely to lose all his meal instead of having it doubled as he had hoped</p>
<p>When he saw me clambering up that spear he let out a hiss that fairly shook the ground, and came charging after me at a terrific rate</p>

.second{ position: relative; border-color: red; left: 20px; top: 10px;}

The red paragraph has moved 20px from the left and 10px from the top, relative to its natural position, where it’s supposed to be.

Notice how the blue paragraphs haven’t moved at all. By using relative positioning, the red paragraph can freely move without disrupting the layout. The only thing out of place is itself. All the other elements don’t know that element has moved.

absolute

When the position is set to absolute, an element can move according to the first positioned ancestor.

“Positioned?? What is a positioned element?”

A positioned element is one whose position value is either relative, absolute or fixed. So unless the position is not set or static, an element is positioned.

The characteristic of a positioned element is that it can act as a reference point for its child elements.

Let’s imagine a simple hierarchy:

<section>
  I'm in position relative.
  <p>
    I'm in position absolute!
  </p>
</section>

section {
  background: gold;
  height: 200px;
  padding: 10px;
  position: relative; /* This turns the <section> into a point of reference for the <p> */
}

p {
  background: limegreen;
  color: white;
  padding: 10px;
  position: absolute; /* This makes the <p> freely movable */
  bottom: 10px; /* 10px from the bottom */
  left: 20px; /* 20px from the left */
}

The yellow section has a height of 200px and its position set to relative, which turns it into a point of reference for all my child elements.

As the green paragraph’s position is set to absolute, it can freely move according to the yellow section. By setting both bottom and left values, it will move from the bottom left corner.

What happens if we set both left AND right?

If the width is not set, applying left: 0 and right: 0 will stretch the element across the whole width. It’s the equivalent of setting left: 0 and width: 100%.

If the width is set, then the right value is discarded.

fixed

When the position is set to fixed, it acts like absolute: you can set left/right and top/bottom coordinates.

The only difference is that the point of reference is the viewport. It means that a fixed element won’t scroll with the page ; it is fixed on the screen.