On every page we've built thus far, the position of every element has been determined by where that element landed in the document flow. Elements at the beginning of the HTML document are positioned at the beginning of the rendered page, then as we proceed toward the bottom of the source code, the finished output is rendered sequentially, more or less like words in a word processor. The document flow can be tricky to manage for complex layouts, but it is also incredibly flexible, because it's built around the idea that content determines page height. However much content you have, it always fits!
While relying on the document flow to position elements is almost always the right way to go, it is not the only way. CSS provides us with tools for taking control of (and responsibility for) the position of elements directly.
We can control the position of an element with a combination of the position property, and the top, right, bottom, and left properties.
These properties use a simple numeric value, usually expressed in pixels or as a percent, such as left: 100px;. However, these properties are meaningless in isolation: to change anything, the element must also be positioned using the position property, and how the element is changed depends on position as well.
The position property has five possible values: static, relative, absolute, fixed, and sticky. Setting one of these values always serves two purposes:
Let's look at each possible value in turn.
position: static;Static is the normal value for HTML elements. It means the element follows the document flow. Elements that are position: static; are not considered to be positioned: the top, right, bottom, and left properties have no effect on static elements.
.static-example .positioned-element, and set background-color: green;.left: 100px; for the square. You'll see no change because it is static.position: relative;Elements set to relative also follow the document flow, but can be offset from their normal position.
background-color: lightblue;.position: relative;.left: 100px;.top: 50px;.Relative positioning leaves a hole behind: surrounding text behaves as though the square were still in its original place.
Relatively positioned elements can also become positioning parents for absolutely positioned descendants.
position: absolute;Elements set to position: absolute; are ignored by the document flow, as if they don't exist.
position: absolute;.Text after the element slides up to fill the space. Setting top, right, bottom, or left repositions it.
top: 0;.The positioning parent is the nearest ancestor that is positioned. Without one, the element is positioned relative to the document.
.absolute-example.position: relative; for the section.right: 0; for the red square.The red box now sits at the upper-right corner of its section.
position: fixed;Fixed elements are removed from document flow and positioned relative to the browser window. They stay in place when the page scrolls.
position: fixed;.top: 0; and left: 0;.width: 100%; to make a navigation bar.The purple bar stays at the top of the viewport as you scroll.
position: sticky;Sticky positioning is a hybrid of relative and fixed. The element scrolls normally until it reaches its specified threshold, then sticks until its containing section ends.
position: sticky;.top: 50px;.Scroll to see the orange square stick and then move away when the section ends.
Positioned elements may overlap. The z-index property controls which elements appear in front, like Bring to Front or Send to Back in Illustrator.
z-index: -1; on the lightblue square.z-index: 9999; on the purple fixed navigation bar.Higher z-index values appear in front within their stacking context.
Positioning is best used for specific layout enhancements, rather than as a replacement for normal document flow.