The right Position

Position basics in CSS

What are positions in CSS?

Positions in CSS are when you place elements on a web page, it is important to specify how they are displayed in relation to each other or their parent element. Positions help you to set this. There are 5 main positions in CSS, but for this post, I will be looking at these 4 very important ones Static, Relative, Absolute, and Fixed.

Static

Every element has a position:staticproperty by default. An element with position static is an unpositioned element due to the fact that it flows in the normal rendering sequence of the web page. It is easy to think the static position is the same as the relative position, that could be true except that static elements don't obey the left, right, top, and bottom rules.

Relative

When a child element has the position:relative property, it takes up a position that is relative to its parent element.

This enables the child element to take up a position that considers the dimensions of the parent element.

Absolute

If a child element is given the position:absolute property, it will behave like the parent element is not there, and will be positioned automatically to the starting point which is the top-left corner of its parent element. If it doesn't have any parent elements.

Fixed

Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll.

CSS position has always been a tricky topic for me, but over time I’m beginning to get a hang of it through usage. So I’ll advise you to implement these positions often in order to find out for yourself, what they really do.