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.
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.
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.
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 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.