CSS Layout and Positioning

CSS Positioning

CSS positioning is involved, but take the time to memorize and understand these challenging principles early and it will make your font end developing life a whole lot more pleasant.

The four positions we will talk about now are:

  • static
  • relative
  • fixed
  • absolute

In CSS, we would make an element a certain position like:

div {
  position: relative;
}

Or whatever position we need.

Static

Static is the default. Elements are positioned according to the normal flow of the page.

Relative

Elements are positioned relative to their normal position.

This means we can give them top, bottom, left and right properties. We could not have done that to a static element.

This pushes the element away from the top, bottom, left or right.

div {
    position: relative;
    top: 60px;
}

This would push or div down (away from the top) 60px.

Make sure you have these two positions memorized, and understand them before moving on.

So, just regular position: relative does change where it's going to sit, but once we say: right: 10px it's going to move ten pixels from the right of where it would be if positioned statically.

Fixed

Fixed elements stay on the viewport (screen or window) where you put them no matter where you scroll.

Bottom, top, left and right are used to position them.

You can stick a footer permanently to the bottom of the page, even if you scroll, like this:

.footer-content {
    position: fixed;
    bottom: 0;
}
Absolute

These elements should be nested somewhere in a positioned element.

They look for their nearest positioned ancestor and can use top, bottom, left and right to be positioned exactly inside that positioned ancestor.

Positioned and not Positioned

Every element with the position static is considered "not positioned." Every element with the positions fixed, relative, or absolute are considered "positioned." This is important for position Absolute.

Tutorials and Practice

Here are some useful tutorials to being able to understand these positions. It's important to practice using these. You can't avoid positioning.

http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://learnlayout.com/position.html