Positioning

Last Updated March 21, 2017

Positioning is hard. It’s hard because it’s relative to the container its in and the items around it. In fact, that’s so important, it’s worth repeating.

Positioning is hard because it’s relative to the container its in and the items around it.

Let’s break it down and maybe we can remove some of the ambiguity around it.

There are five position properties:

  1. static
  2. relative
  3. fixed
  4. absolute
  5. inherit

We’ll talk about each, one at a time.


Static

.static {
	position: static;
}

static position is the default. Meaning, if you don’t specify a position, it will be static. It’s not positioned any special way. In fact, it’s considered not to have any positioning at all.

If you have two divs with static position, they will display stacked on top of each other:

<div class="thing thing-1">Thing One</div>
<div class="thing thing-2">Thing Two</div>

CSS

.thing {
  background: gray;
  color: white;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  width: 100px; 
}

NOTE:

Remember: I didn’t even need to specify position within my CSS becuase the default value is static.

This is what we get:


Relative

This is where things start to get interesting.

.relative {
	position: relative;
}

When you give an item a position of relative, it will look the exact same as static, unless you assign it additional properties.

You can shift the item left, right, top, or down.

Let’s take a code example. We’ll use the same HTML, except this time, we’ll get a little more creative with our CSS.

HTML

<div class="thing thing-1">Thing One</div>
<div class="thing thing-2">Thing Two</div>

CSS

.thing {
  background: gray;
  color: white;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  width: 100px; 
}

.thing-1 {
		position: relative;
		left: 200px;
}

This is what we get:

As we expected, Thing One 200 pixels were added to the left side.

As you continue to do more complex layouts with positioning, the important thing to note about relative positioning is document flow.

NOTE:

“Document flow” probably sounds like a fancy word, but all it means is the arrangement of elements on the page — how the elements take up space and arrange themselves around each other.

The normal (or default) document flow is the way items are written in HTML, from top to bottom.

Some things are best learned by example, so let’s look at some more code:

HTML

<div class="thing thing-1">Thing 1</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

We’ll use the same CSS as before, except instead of shifting using left: 200px, we’ll use top: 200px

CSS

.thing {
  background: gray;
  color: white;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  width: 100px; 
}

.thing-1 {
		position: relative;
		top: 200px;
}

The result:

Similar to left: 200px, Thing One shifted 200 pixels from the top.

But, did you notice the awkward space above the text? Maybe you thought it was a spacing error on the page? Nope!

Here’s the point:

With relative positioning, the item stays within the document flow and shifts relative to it’s original position.

In our example, there’s still space for a 100px by 100px block at the top of the text, where Thing One lived originally. Even though, the box displays below the text.

Let’s look at the next one:


Fixed

.fixed {
	position: fixed;
}

This one is easy to remember. The element stays fixed. It doesn’t move, even when you scroll.

Let’s look at a code example:

HTML

<div class="thing thing-1">Thing One</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS

.thing {
  background: gray;
  color: white;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  width: 100px; 
}

.thing-1 {
  position: fixed;
}

This is the same snippet of code we were looking earlier, except Thing 1 has a position of fixed applied.

Here’s what it looks like within our browser:

My window is small, but Thing 1 doesn’t scroll.

Like relative positioning, you can add left, right, top, and bottom to place the item on screen. Let’s modify our CSS:

.thing-1 {
	right: 0px;
		position: fixed;
}

As expected, you’ll notice that Thing 1 is now fixed to the right side. There are 0 pixels between the right side and Thing 1.

With fixed positioning the item is displayed in relationship to the viewport.

Remember talking about document flow? Within fixed positioning, the item gets pulled out the document flow. You’ll notice, in our examples, Thing 1 overlaps with the text. — And that Thing 1 appears in the HTML before the text, but when we apply right: 0, Thing 1 displays after text. Unlike relative, there’s not a gap either.

Let’s move on, I feel like we’ve set ourselves up to make absolute positioning really easy.


Absolute

.absolute {
	position: absolute;
}

Absolute positioning is very similar to position: fixed except it can scroll.

Like all the options we’ve looked at before, you can shift the placement with top, right, left, and bottom.

Absolute positioning will also pull the item out of the document flow.

Here’s the tricky part, though:

Absolute positioning depends on the positioning of it’s parent.

Let’s look at some examples.

HTML

<div class="thing thing-1">Thing One
	<div class="thing thing-2">Thing Two</div>
</div>

CSS

.thing {
  background: gray;
  color: white;
  height: 100px;
  margin-bottom: 10px;
  text-align: center;
  width: 100px; 
}

.thing-2 {
	position: absolute;
	right: 0;
}

Here, we’re back to Thing 1 and Thing 2 boxes, except this time Thing 2 is nested inside of Thing 1.

Thing 1 doesn’t have any positioning on it. That makes it static, remember?

You’ll notice Thing 2 is on the right edge of the window. It’s positioning is relative to the viewport.

You may have wondered why Thing 2 has a little bit of spacing between the top edge and where the box appears. Even though the parent doesn’t have a position property applied, it’s still effected by the parent. If I remove right: 0;, then you’ll notice the box appears right after the text.

It has the same vertical placement whether the right: 0; property is present or not.

If you want the box to appear flush with the top of the viewport, we would need to add top: 0;.

Let’s make things interesting. Let’s change our CSS for .thing-1 and .thing-2:

.thing-1 {
  position: relative;
}

.thing-2 {
  position: absolute;
  right: 0;
}

Our HTML is still the same:

<div class="thing thing-1">Thing One<div class="thing thing-2">Thing Two</div>
</div>

Now, Thing 2’s parent has a position of relative. Meaning, Thing 2 will be placed in relationship to Thing 1, its parent.

The 2 “things” are on top of each other. — and if we changed .thing-2 to include top: 0; Thing 2 would completely cover up Thing 1.

As we move Thing 1 around, Thing 2 will follow:

.thing-1 {
	position: relative;
	left: 100px;
}

.thing-2 {
	position: absolute;
	right: 0;
}

Let’s do our due diligence and explore one more option:

.thing-1 {
	position: absolute;
	left: 100px;
}

.thing-2 {
	position: absolute;
	right: 0;
}

Now, both Thing 1 and Thing 2 are both absolutely positioned.

This looks similar to our previous example. Why is that? Thing 1’s doesn’t have any positioning on it. It’s relative to the viewport. It moves 100px to the left.

Thing 2, still moves in relationship to Thing 1.

If we added text, though, you’d see the difference between

.thing-1 {
	position: relative;
	left: 100px;
}

and

.thing-1 {
	position: absolute;
	left: 100px;
}

is document flow. Remember? With relative positioning, the item stays within the document flow, whereas with absolute positioning it gets pulled out.

Awesome! There are few things that still change the display of an item, but that covers everything for the position property. Does that clarify some things? Are there any areas where there’s still confusion?


Resources

If you’re looking for more resources on the subject, these were a few of my favorite:


The Conversation