CSS positioning has been around for quite some time. Even with the advent of all of the new css layout methods, CSS Positioning is still in heavy use today, and a necessity to learn.

Subscribe To The Channel!

Watch the Video Tutorial on YouTube for a visual explanation!

Regardless of which position type you choose, you'll always be moving an element in a specific direction from where it normally would flow. We call this altering the 'document flow'. There are 4 keywords you'll use to move. You can use positive or negative numbers. The value is always an offset from the keyword you choose, with positive number pushing 'inwards' and negative values pushing 'outwards':

• Top, Right, Bottom, Left

(image from video tutorial)

There are 4 main types of CSS positioning. We'll take a look at each starting with Relative Position

Relative Position

Two important things with relative positioning:

• Relative positioning is positioned according to itself
• Relative positioned elements are not removed from the document flow

Absolute Position

Two important things with absolute positioning:

• Absolute positioning is positioned according to the Parent Element (if the parent has a position)
• Absolute positioned elements are removed from the document flow

Fixed Position

Two important things with fixed positioning:

• Fixed positioning is positioned according to the viewport (browser window)
• Fixed positioned elements are removed from the document flow

Sticky Position

One important things with sticky positioning:

• Sticky positioning behave like relative, until they get 'stuck', then they behave like fixed (but on the parent, not the viewport)

Z-Index

Whenever you start moving things around, inevitably you'll have boxes that 'sit' on top of one another. You'll need to control the z plane stacking order. You do this via z-index property. It's pretty simple, the higher values sit on top of lower values:

(image from video tutorial)