How to use position absolute? CSS positions

We’ll see how to use the position rule with the absolute value, the problems it can cause, and how best to use it.

Definition and how position absolute works

The absolute position allows us to move the element freely with top, right, bottom, and left.

The parameter the element uses to reference itself is its last parent element that has a position rule.

That is, if we want to position a div anywhere inside another div, this second parent div must contain a value in the position property.

And remembering that static is not accepted, we need to have a different value such as relative.

CSS Rule

We can position an element with absolute as follows:

.selector {
    position: absolute;
}

But don’t forget to assign a position to the parent element, otherwise, the absolute positioned element may not correctly obey the positions you specify.

Ways to use absolute

Now see a practical example of absolute, in the following code:

<div class="box1"></div>
<div class="box2">
    <div class="absolute"></div>
</div>

// css
.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
}

.box2 {
    width: 100px;
    height: 100px;
    background-color: green;
}

.absolute {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    top: 0;
}

As the box2 div wasn’t explicitly assigned any position, the absolute div was positioned according to the body, and it didn’t respect the CSS rule that would make it stay in div2, see:

But if we add, for example, a position rule to box2:

.box2 {
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
}

The absolute element respects its place in the HTML and is at the 0 point of div2, see:

Centering an element with absolute

Another difficulty often encountered is to center this element on another parent element.

Firstly, to center horizontally, you must enter left and right with value 0 in the rules, and leave margin-left and right with the value auto.

.absolute {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

So we center horizontally:

For the vertical it is in the same direction, we must reset the values of top, left, bottom, right and leave a rule for margin with auto.

.absolute {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

See it below:

And if you need to centralize responsively, use the following rule:

.absolute {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

The result will be the same. 🙂

Conclusion

Position absolute is a way to efficiently position elements in HTML.

Because it gives us more freedom to enter the ‘absolute’ directions without worrying about other elements that are close to what we want to position

We just have to take care of setting a position, which is not static, for the parent element of the element to be positioned so that our instructions are faithfully interpreted.

And that’s about absolute, thanks for reading to the end, if possible subscribe to our list to receive more content and see you next time!

Also take a look at my YouTube channel, I post a lot of tech content there! 🙂