As your website project gets more detailed, issues with aligning on-page elements may arise, and using CSS to position them can speed up your workflow.

Normal flow

Before going into details, let's see how these elements automatically get their position on your page. To understand this, you need to understand the normal flow of the web page. Normal flow is how the elements are arranged on a page if you haven't changed their layout. When you add elements to a web page, they will arrange themselves based on the rules defined by the normal flow. There are two types of elements on a web page. Block-level elements and inline elements. There are two types of elements on a web page. Block-level elements and inline elements. Inline elements such as <a>, <img>, <span>don't form their own blocks. Instead, they are displayed within lines. They line up next to one another horizontally; when there isn't enough space left on the line, the content moves to a new line. Now let's see how we can change and manipulate these positions in CSS.

What Is Position in CSS?

The CSS position property is used to specify how the element will be displayed on the page. The top, right, bottom, and left CSS position properties determine the final location of the element.

CSS Position Types

1. Static Positionin
2. Relative Positionin
3. Fixed Positionin
4. Absolute Positionin
5. Sticky Positionin

static position

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This div element has position: static

Relative Position

Relative positioning allows you to position the selected element relative to how it would have been positioned by default or if it was given a position of static.

When you move an element that has a relative position, it doesn't affect the position of anything else on the screen, it is as if the old position was kept or still being maintained and everything else just flows around it as if it was never moved. In relative positioning, when you change the position, the original space of the specific element will not remove from the normal flow.

As is illustrated in the pen below. When you give an element a position of relative, it does nothing until you add at least one of the left, right, top or bottom properties to the element. Setting the top, right, bottom, and left properties of a relatively positioned element will cause it to be adjusted away from its normal position.

Fixed Position

If you give an element a fixed position and a left, right, top or bottom property, if you scroll, the element will not move but stay fixed to the position relative to the body of the website or page. Fixed positioning is useful if you have a navigation bar or sidebar that you want to stay fixed. An element with position fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. A fixed element does not leave a gap in the page where it would normally have been located.

Absolute Position

In this case the parent element must have a position property value other than static for the absolute position to work. If there is no element with a position property value, the element will be positioned relative to the viewport.

When you assigned an absolute position to an element, it removes from the normal flow, the space that the element was originally occupying is no longer there.

Check the below picture. Now your pink div has an absolute position inside the container. Also, the white div has moved to your pink div's original space.

Sticky position

As the name says, it means that you stick your item into a particular place.

The sticky property is a combination of relative and fixed which keeps an element relative until a position condition is met. Say you give a div a position of sticky and a top property of 50px, the element will be positioned relatively until you scroll to a point in the viewport where the element is 50px from the top, then it becomes fixed.

Did you notice how it sticks on top of the container when it moves?

Alright, I hope you understand the different values in position property and how those behave.