CSS Positioning 101
Positioning an element on a web page can be tricky. You can specify the position of an element using left, right, top and bottom properties. But these properties will not work if the position value is not properly set. The positioning properties also display differently depending on the positioning value.
Elements can overlap or be off the page when an element’s content is too big. Understanding CSS positioning properties thoroughly will allow you to quickly position an element accurately without fumbling through trial and error. There are seven positioning values to consider: Static, Relative, Absolute, Fixed, Sticky, Initial and Inherit.
Static
Every element is statically positioned by default. These elements follow the normal flow of the web page. A statically positioned element cannot be offset since it does not respond to the top, bottom, left, and z-index positional properties. Static positioning is rarely used unless you need to forcefully override a positioning that is previously set by a matching selector.
Relative
A relatively positioned element is positioned relative to its default static placement. In other words, such an element behaves the same as a static element until you offset it with extra properties. Relatively positioned elements can be offset with left, right, top, bottom, and z-index positional properties. These elements often serve as container blocks for absolutely positioned elements.
Absolute
An absolutely positioned element is positioned relative to its first container element that is not statically positioned. If there is no container element, the absolutely positioned element gets positioned relative to. Also, you can specify the exact position you want the element to appear with positional properties. Absolutely positioned elements are not part of the normal flow of the web page. That is other elements in the web page behave like the absolutely positioned elements do not exist.
Fixed
Fixed elements are very similar to absolutely positioned elements. They are both not part of the normal flow of the web page. The only difference is that fixed positioned elements are always relative to the browser window, not to a parent element, and are not affected by scrolling. When scrolling, the fixed elements stay anchored to the browser window as all other elements scroll past. Thus, fixed elements are visible at all times on the web page. Web pages with fixed elements should be tested thoroughly since fixed elements may cause usability issues such as overlapping other elements and cutting off other elements from visibility. In printed document, the fixed element is printed on every page. This type of element is commonly used to make navigation elements constantly accessible.
Sticky
A sticky element initially behaves like a static element within its container until a given offset threshold is reached, in which case it acts like a fixed element.
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 20px;
}
When a user scrolls down and reaches the offset threshold (top: 20px), the element becomes fixed. And it falls back into place when the user scrolls ups. It’s usually used to keep navigation elements visible on the page. Compared to the other positioning values, sticky is relatively new and is not supported by all browsers.
Initial
An element with an initial position takes on its default static value. This value property should not be used since we can override a previously set value with static. Moreover, the initial value property is not supported in Internet Explorer and some earlier Opera browsers.
Inherit
An element with an inherited position takes on the value of its container element. This value is mainly used to adhere to the DRY (Don’t Repeat Yourself) principle.
Conclusion
Although this is just a brief overview about the CSS position property, I hope this helps you build layouts effectively while avoiding tedious guesswork during position bug fixes.
