The Position Property Flashcards
What is the position property?
The position property is all about the flow of elements in an HTML document.
The most common values used for position are static(which is the default value), fixed, relative, and absolute.
What is normal flow?
Normal flow refers to the default way browsers render content.
Under normal flow, block-level elements get rendered in the same order that they appear in the HTML markup, one on top of another, starting from the top left corner of the document, and inline elements stretch as wide as their inside content (usually text).
What does it mean to be position: static?
Any HTML element with the position: static (which is also to say, any element that you don’t explicitly set position to a different value on) will have what is called normal flow.
position: static – or rather, not setting any value for position on an element – is often the behavior we want. Unless you have a specific reason to choose one of the other possible values discussed below, then don’t explicitly set position.
What does it mean to be position: fixed?
When an element’s position is set to fixed, it will stay in place even when the user scrolls.
Fixed elements are taken out of the normal flow, and other elements will position themselves as if the fixed element does not exist.
Fixed elements are fixed in relation to the viewport (aka, the browser window).
What is offset?
CSS gives us four offset properties: left, right, top, bottom.
These properties can be used on elements whose position is set to fixed, relative, and absolute, but not static.
What does it mean to be position: relative?
When an element’s position property is set to relative, it is still in the normal flow (in other words, relatively positioned elements are rendered in the order they appear in HTML), but unlike with static elements, we can use offset properties (left, right, top, bottom) with relative elements.
Note that any offsets on a relative element are in relation to where they would be in the normal flow, not the viewport.
What does it mean to be position: absolute?
Like fixed elements, absolute elements are outside the normal flow and can be offset, but unlike fixed elements, they are offset in relation to the first parent container with a non-static position.
A common use case for absolute positioning is when you have a navbar where you want to align a logo to the left and a set of links to the right
