Positioning is an essential aspect of web design. It allows you to precisely control the placement of elements on a page and make them look the way you want. CSS provides several ways to position elements, and two of the most commonly used positioning methods are static and relative positioning.
In this article, we’ll explain what static and relative positioning are and how they differ, as well as when to use each one.
Static Positioning#
Static positioning is the default positioning method for all elements. When an element is positioned statically, it is placed in the normal document flow and is not affected by any of the positioning properties.
This means that if you don’t explicitly set the position property of an element, it will automatically be positioned statically.
Here’s an example of a div element that has static positioning:
div {
position: static;
}
Static positioning is useful for elements that don’t need to be moved or adjusted from their default position. However, it provides limited control over the positioning of the element, and it cannot be used to create complex layouts.
Relative Positioning#
Relative positioning allows you to move an element from its default position while still maintaining its position in the normal document flow. When an element is positioned relatively, it is shifted from its default position based on the values you specify for the top, right, bottom, and left properties.
Here’s an example of a div element that has relative positioning:
div {
position: relative;
top: 20px;
left: 50px;
}
In this example, the div element is positioned relative to its default position, with a 20-pixel distance from the top and a 50-pixel distance from the left.
Relative positioning is useful for small adjustments to the positioning of an element. However, it is not suitable for creating complex layouts, as it can cause elements to overlap with each other.
In practice, however, relative positioning is often used in combination with other positioning methods such as absolute positioning to create complex layouts. We will see how this is done in the next section.
Conclusion#
In conclusion, static and relative positioning are two essential positioning methods in CSS that provide different levels of control over the positioning of elements on a page. Static positioning is the default positioning method and should be used for elements that don’t need to be moved or adjusted from their default position. Relative positioning allows for small adjustments to the positioning of an element while still maintaining its position in the normal document flow.
Now that you know the difference between static and relative positioning, let’s take a look at absolute positioning!