Advanced Positioning
“Static positioning” refers to the normal flow of a web page, but this is not the only positioning scheme available in CSS.
The other three types of positioning are:
- Relative.
- Absolute.
- Fixed.
Opposed to the more semantic options in flexbox and floats, each of the above–mentioned types of positioning (relative, absolute and fixed) lets us manually position elements using specific coordinates.
Thus, instead of saying “Stick this box in the center of its container,” advanced positioning lets us say things like “Put that box 20 pixels above and 50 pixels to the right of its parent's origin.”
Positioned Elements:
The CSS position property lets you alter the positioning scheme of a particular element. Its “default value” is static. When the position property of an element has any other value than static, it is called a “positioned element”.
Relative Positioning:
Relative positioning moves elements around relative to where they would normally appear in the static flow of the page.
To turn an element into a relatively positioned element, add the following rule to your CSS stylesheet:
div {
position: relative;
top: 30px;
left: 30px;
}
The position: relative; line makes it a positioned element, and the top and left properties let you define how far it is offset from its static position. This is sort of like setting an (x, y) coordinate for the element.
Relative positioning works similarly to margins, with one very important difference: neither the surrounding elements or parent element are affected by the "top" and "left" values. Everything else renders as if the relatively positioned item was in its original position.
We can also offset relative to the other edges with the bottom and right properties.
Absolute Positioning:
Absolute positioning is similar to relative positioning, but the offset is relative to the entire browser window instead of the original position of the element.
Since there is no longer any relationship with the "static flow" of the page, consider this the most "manual" way to lay out an element.
To turn an element into an absolutely positioned element, add the following rule to your CSS stylesheet:
div {
position: absolute;
top: 10px;
left: 10px;
}
The absolute property completely removes an element from the normal flow of the page.
With absolute positioning, the original space vanishes. It is as if the absolutely positioned item does not even exist to its parent and surrounding elements.
This behaviour is not really all that useful most of the time because it would mean everything on your page needs to be "absolutely" positioned — otherwise we would get unpredictable overlaps of static elements with absolute elements.
So, why does absolute even exist ?
(Relatively) Absolute Positioning:
Coordinates for absolute elements are always "relative" to the closest container that is a "positioned" element. It only falls back to being relative to the browser when none of its ancestors are positioned.
Absolute positioning becomes much more practical when it is relative to some other element that is in the static flow of the page.
Thus, if we would change the parent element of the absolutely positioned item to be "relatively" positioned, it should appear in a position relative to its parent container rather than the browser window.
.container {
position: relative;
}
.item {
position: absolute;
top: 10px;
left: 10px;
}
This is how we safely combine "absolute" positioning with "static" positioning:
We do not specify any offset coordinates for the parent container. We only use "relative positioning" for the sole purpose of letting our absolute element hook back into the normal flow of the page.
Fixed Positioning:
Fixed positioning is similar to absolute positioning except in one thing:
It does not scroll with the rest of the web page.
Thus, if we would add the following CSS declaration to our stylesheet:
.fixed_item {
position: fixed;
bottom: 0;
right: 0;
}
This will place the our “fixed element” in the bottom–right corner of the screen. If we would try to scroll the page, we will discover that it does not move with the rest of the elements on the web page, while an absolutely positioned element will do.
This let us create navigation bars that always stay on top of the screen.
Positioned Elements for Menus:
Navigation menus should almost always be marked up as a <ul> list instead of a bunch of <div> elements. These semantics make your site's navigation much more accessible to search engines.
Inline Menu Items:
Despite being marked up as “unordered lists”, the navigation menus for most websites do not actually look like a list. We can fix this by making the list items inline boxes instead of block boxes via the display property.
Z–Index:
The z–index property lets you control the depth of elements on the page. If you think of your screen as 3D space, negative z–index values go farther into the page, and positive ones come out of the page.
Only positioned elements pay attention to their z–index property.