What is CSS positioning?
CSS position is the location where an element will be placed in a document. Using the top, bottom, right, and left attributes, you can specify the exact position of an element.
Knowing how to properly layout elements is very essential when it comes to designing a webpage layout. There are different methods to aligning elements on a webpage with CSS and they are; display, float and the position property.
In this article, we'll learn what the CSS position property is, it's five different values and how to use offset properties to set the final position of elements.
There are five CSS positioning types:
Static
Relative
Absolute
Fixed
Sticky
Let’s look
Static Positioning
This is the default positioning of elements in a document. It positions them from top to bottom.there is absolutely no need to set elements to position: static for it as it is the default position of every HTML element in a webpage.
The code snippet below shows a static positioned element by default.
HTML
CSS
Result
Relative positioning
When an element assumes this position, it is placed relative to its initial position. However, should you use it and not indicate the top, right, left, or bottom coordinates, it will assume a static position.
Note: The space where the relatively positioned element occupied prior to setting the offset properties stays intact and the contents surrounding it are not affected either.
Besides, a parent with a relative positioning allows you to absolutely position child elements within it. As such, you can position the elements anyhow you want.
Absolute positioning
Yet another powerful CSS positioning type that allows you to position elements where you want them.
It allows you to ignore the normal document flow by setting the top, right, bottom, and left attributes.
The values have to be relative to the parent element with relative positioning.
If there lacks a parent, the element will position itself relative to the HTML document. This position does not affect adjacent elements.
The above results shows that the
.siblingelement uses the offset properties; top and left to position itself by assuming the body as the parent.
The results displayed above shows that the
.siblingelement is positioned 100px from the top and 120px from the left relative to the.childelement.
Note that if an element is positioned absolute, the normal position collapses and the element is removed from the document flow in contrast to relative positioning. The other elements surrounding it ignores the space completely.
Fixed positioning
As the name suggests, the element is fixed to its position when you scroll the page.
That said, it assumes an absolute position allowing you to set the top, bottom, left, and right attributes.
Remember the element is positioned relative to the viewport.
Sticky positioning
Like the static position, sticky positioning positions elements according to normal document flow.
While fancy, not all browsers support it. As you scroll through the page, the element assumes a relative position until the viewport location reaches the specified point.
Here, the home section is sticky.
I hope you find this article helpful.