When to use relative in CSS

In front-end development, CSS is a language used to set web page styles. In CSS, there are several different positioning methods, one of which is relative positioning. Relative positioning has different uses and scenarios than other positioning methods, such as absolute and fixed. In this article, we’ll discuss in detail when to use relative positioning.

What is relative positioning?

In CSS, relative positioning positions an element relative to its original position within the document flow. When using relative positioning, the element remains in its original position within the document flow, but its position can be adjusted using properties such as top, right, bottom, and left.

.relative {
position: relative;
top: 20px;
left: 10px;
}

Comparison with Other Positioning Methods

Compared to absolute and fixed positioning, relative positioning plays a relatively minor role in web page layout. Absolute positioning is relative to the nearest non-static positioned parent element, while fixed positioning is relative to the browser window. In contrast, relative positioning is unique in that it doesn’t disrupt the document flow, making it suitable for fine-tuning element positioning.

Usable Scenarios

1. Fine-tuning Elements

The most common use of relative positioning is for fine-tuning elements. For example, when we want to adjust an element slightly relative to its original position, we can use relative positioning.

.relative {
position: relative;
top: 10px;
left: 5px;
}

2. Using with Absolutely Positioned Elements

In some cases, we want an element to be positioned relative to another element that has been positioned using absolute or fixed positioning. In this case, we can set the parent element to relative positioning and the child element to absolute positioning.

.parent {
position: relative;
}

.child {
position: absolute;
top: 50px;
left: 50px;
}

3. Hover Effects

In web design, there are often effects that need to appear when the cursor hovers, such as displaying a popup or changing an element’s style. We can use relative positioning to achieve these effects.

<div class="parent">
<div class="child">Hover me</div>
</div>

<style>
.parent {
position: relative;
}

.child {
position: absolute;
top: 0;
left: 0;
display: none;
}

.parent:hover .child {
display: block;
}
</style>

4. Clever Layout Design

Sometimes, we need to implement more complex layout designs, perhaps creating a new element within another and positioning it relative to the parent. In this case, relative positioning can come in handy.

.parent {
position: relative;
}

.child {
position: absolute;
top: 20px;
left: 20px;
}

Summary

In front-end development, relative positioning is a relatively lesser-used but still important positioning method. By combining and properly utilizing other positioning methods, relative positioning can help achieve unique layout and interactive effects, enhancing the user experience of web pages. When choosing a positioning method, we need to determine the appropriate one based on specific needs and scenarios. Proper use of relative positioning can make web pages more creative and flexible.