Positioning

My first rule of using positioning is, don’t use it if you don’t have to!

We have a lot of ways to move things around to create layouts or adjust where an element is on the screen, and you probably want one of those things instead.

That said, positioning is incredibly powerful and useful, as long as you’re using it for the right use case.

The properties & values

We have several values that we can use with the position property:

• absolute
• fixed
• relative
• sticky
• static (the default)

When we declare any of these other than static, we open up a new set of properties:

• top
• bottom
• left
• right
• inset (shorthand for all of the above)
• z-index

The inset are used to manipulate the area an element lives, while z-index deals with layering, because if you move an element around, it will invariably end up on top of other elements and then layering becomes a thing.

We are changing Layout Modes

Keep in mind that when you declare something other than static for the position, you’re changing the Layout Mode, so some behaviors might change!