Positioning in CSS

We come across many elements during the webpage creation, and each of these elements must be positioned on the webpage. For this, we have a position property in CSS. The position property is used to align the different elements on the HTML page. Position Property plays an important role in making high-quality web pages.

The CSS position property defines the position of an element in a document. The position property when accompanied by other properties such as the top, left, bottom, and right play an important role in designing a webpage

There are five values the position property can take. These are

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

Static

Static is the default value for the position property. In static position, elements are positioned according to the normal flow of the page. Left, top, right, bottom and Z-index don't affect an element positioned static.

Syntax:

selector{
position: static;
}

Relative

Relative positioned elements also remain in the normal flow of the page. But unlike static the properties of left, right, top, bottom, and Z-index affect the element positioned relative.

Syntax:

selector{
position: relative;
top: value;
left: value;
right: value;
bottom: value;
z-index: value;
}

Absolute

Absolute positioned elements do not follow the normal flow of the page. They are positioned according to the closest relative positioned parent. The properties of left, right, top, bottom, and Z-index to the element are given in accordance per the parent element containing the element which is absolute positioned.

Syntax:

parent{
position: relative;
}

selector{
position: absolute;
top: value;
left: value;
right: value;
bottom: value;
z-index: value;
}

Fixed

The fixed element does not follow normal document flow and position themselves relative to tag. This element always sticks to the screen. The properties of left, right, top, bottom, and Z-index affect the element positioned fixed.

Syntax:

selector{
position: fixed;
top: value;
left: value;
right: value;
bottom: value;
z-index: value;
}

Sticky

An element positioned sticky is basically the combination of position: fixed and position: relative. The element positioned sticky acts as a element positioned relative till a certain point on the screen. After that point the element starts acting as position fixed.

Remember that getting better at CSS takes consistent practice. So continue to practice and you'll improve.