How to use the position property in CSS to align elements?

CSS

Posted on July 30, 2021April 13, 2022 | by rajeshkumar

Post Views: 20

In This tutorial, I am going to explain that how to How to use the position property in CSS to align elements? Below Property to uses in align elements-

Position-

Left
Right
Bottom
Top
static
Fixed
Relative
Absolute

Length (cm, px, %)

Left Align Property-

left: auto
left: 55px
left: 50%

Right Align Property-

right: auto
right: 23px
right: 50%

Bottom Align Property-

bottom: auto
bottom: 23cm
bottom: 40%

Top Align Property-

top: auto
top: 20%
top: 40px

static–

When we set static position for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page. left, right, top and bottom property won’t work with static position.

Ex: –

h1 {
position: static;
border: 5px solid red;
}

h1 {
position: static;
border: 5px solid red;
left: 50px;
}

fixed-

When we set fixed position for an element it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

img {
position: fixed;
right: 0;
top: 50%;
border: 3px solid red;
}

relative-

When we set relative position for an element, elements positioned to its normal flow.

h1 {
position: relative;
left: 50px;
border: 3px solid red;
}

absolute-

When we set absolute position for an element, element is positioned to the nearest positioned ancestor. If there is no positioned ancestor then it follow the normal position according to browser.

div {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid red;
}