Tagged with

The position declaration is a great way to get elements to appear right where you need them to. It has 4 possible values: static, relative, fixed, and absolute. Once you set any value other than static you'll be able to use the top, bottom, left, and right keywords to adjust the rendered position of the element. None of these values cascade, but the position declaration can interact with its element's descendants. Luckily, all this is pretty strait forward, so let's hop in.

First lets create a page and stylesheet with some lorem content to work on:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>The Position Declaration</title>
    <link rel="stylesheet" href="normalize.css" type="text/css">
    <link rel="stylesheet" href="typebase.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <header>
      <h1>The Position Declaration</h1>
    </header>
    <main>
      <!-- snip 4x p of Lorem content  -->
    </main>
  </body>
</html>
header {
  text-align: center;
}

main {
  margin: 0em 2em 0em 2em;
}

static

The default value of position is static, and as such all of the paragraph tags here are statically positioned. This means they fit into the normal flow of a document. Since position isn't inherited, generally the only reason you would ever need to explicitly set an element to static is to override a previous non-static declaration. These cases are pretty rare, so you probably won't use static a whole lot.

fixed

If you've ever wondered how people create headers or footers that seem to stick to the page, wherever you scroll, thats via the position: fixed; declaration. This fixes the element in the viewport, and removes it from the standard document flow.

Lets use this to create a fixed footer below main.

<footer>Hey look, a fixed footer!</footer>
main {
  margin: 0em 2em 4em 2em;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: grey;
  padding: .5em;
  border-top: solid 1px black;
}

The viewport is the portion of the document that you can see at any given time. This is usually based upon the size of the browser window. I used the bottom declaration here because I wanted the footer pinned to the bottom of the viewport.

You should be very careful with using fixed, as it can create a lot of issues for smaller viewports like phones. Now that responsive or adaptive designs are ubiquitous, the usage of fixed has waned.

Direction Priority

I'd like to make a a quick note on direction priority concerting top/bottom & left/right:

On an element, if you use both top and bottom, then top has priority. For left and right then which ever is the first in the current text direction would win, by default that is left.

Revisiting static

Let's revisit static temporarily and add that declaration on our footer, in a later rule like this:

footer {
  position: static;
}

Now you can see our footer is no longer sticky, but lives at the bottom of the page. The footer also now fits into the normal document flow. I'll revert this rule so we go back to our fixed footer.

absolute

absolute works a lot like fixed, but instead of being calculated from the viewport, its done in relation to the closest ancestor with absolute or relative positioning. Often this is the body element, so you can use absolute to position in relation to the entire document in this way. Just like fixed, when you use absolute then the element is removed from the flow of the document.

Lets take our last paragraph and turn it into an aside that is absolutely positioned:

<aside>
  <h3 class="hug">Aside</h3>
  <p>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.</p>
</aside>
aside {
  position: absolute;
  top: 2em;
  background-color: lightcoral;
  padding: .25em;
  right: 2em;
  width: 10em;
}

I added the background-color here so we can see exactly where the block is. You can see that it got removed from the document flow, but its now overlaying some of our other content. Lets update the margin on those elements to compensate:

header {
  text-align: center;
  /* adding the margin here */
  margin-right: 10em;
}

main {
  /* added the right margin here */
  margin: 0em 14em 4em 2em;
}

Great, that looks a lot better!

relative

The relative rule is the most commonly used position, other than the default. This rule lets an element be nudged out of its current spot, and displayed elsewhere inside of the document. This doesn't affect the flow of the page.

I'll take this second paragraph and turn it into a blockquote, then do some positioning work on it.

<blockquote>
  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.
</blockquote>
blockquote {
  position: relative;
  left: 1em;
  width: 20em;
  padding: 1.5em;
  font-style: italic;
  border: 1px solid black;
  background-color: lightgrey;
}

You can see our quote got moved to the right a little. This is cool, but the real power of relative is that we can leverage it to do internal aligning.

nesting absolute inside of relative

Next I'll add a byline and position it in the bottom right. Relative limits children elements that have absolute positions inside of its bounds. This fencing is a really nifty trick.

<div class="byline">-- Some Author</div>
blockquote .byline {
  position: absolute;
  right: 1em;
  bottom: .25em;
  font-size: .75em;
  color: red;
  background-color: lightblue;
}

This is a great way to do positioning. It works so well inside of frameworks because the scope is limited to your containing element. I think that this is one of the most useful techniques in all of CSS.

z-index

Another great thing about relative is you get to use the z-index property. This controls what layer an element is rendered on, with the highest number being rendered on top.

Let's add a big DRAFT marker behind the blockquote.

<em>draft</em>
blockquote > em {
  position: absolute;
  top: 1.25em;
  left: .25em;
  text-transform: uppercase;
  font-size: 5em;
  color: lightcoral;
  z-index: 9;
  transform: rotate(30deg);
  padding: .25em;
}

This looks cool, but our DRAFT is still overlaying our text. This is because you can't have a child element be a lower z-index than its parent. There is an easy yet non-obvious solution here though, which is to make the text inside of the blockquote and the emphasis tag be siblings:

<blockquote>
  <em>draft</em>
  <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.
  </div>
  <div class="byline">-- Some Author</div>
</blockquote>
blockquote > div {
  position: relative;
  z-index: 10;
}

That looks perfect, and the core code is really simple!

Summary

Today we looked at the position property, and its four values: fixed, absolute, relative, and static. We looked at a use case for all of them, and saw some special cases of how to stack them. We also looked at how to control which element was rendered on top via the z-index property. All of these are used regularly to get pages looking like their design, and are a great set of tools to know. A good exercise is to take a couple of divs and apply each of the possible values to them, recreating different arrangements so you can really intuit how these work. My favorite example of CSS positioning like this is 10 easy steps page.

Resources


C69b05d12e2e59023ccd2cd030fef830?s=184&d=mm

Adam Dill Adam has over 19 years of software development experience, and has spent a good part of that educating new developers. He was previously CTO at inside.com and Development Director at Maxmedia . When Adam isn't coding, he is off hiking in Colorado mountains, or practicing some pretty fly martial arts. He thinks swords are cool.