How to use position static? CSS positions

In this article, we’ll look at the CSS definition of static position, how to use it, as well as the cases where it is best used.

Definition and how static works

The value of position static is the default for all elements of HTML pages, that is, whenever we create a new element in our project and we don’t define a position, it will have a static value.

Another important point is that static position is not affected by top, left, right, or bottom.

So it is not possible to move the element on the screen with these properties mentioned above.

And it’s also worth mentioning that static isn’t placed specially in HTML.

It follows the flow of code fitting where it was placed.

CSS Rule

We can position an element with static as follows:

.seletor {
    position: static;
}

But there is no need because the element already comes with this position by default.

Ways to use

To be honest you’ll just end up using static when you don’t set a position for the element.

In other cases, you will prefer a position that gives the element more freedom of movement, such as: relative or absolute.

Conclusion

The static value comes by default in all HTML elements, so we don’t need to set this property

It is good to remember that it is not affected by top, left, right and bottom.

In other words, it’s like the name says: static.

A position with somewhat questionable usage ends up just following the HTML flow.

So there is no reason to set this property to an element, other than to override a rule inheriting from another.

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