What Is Positioning Elements In CSS?

Position is a CSS property that let’s you customize the layout of page by allowing you to move the element from it’s original position in the layout.

By default, position property of elements are static. You don’t need to declare position: static because elements are in their normal flow layout.

What is normal flow?

Normal flow is layout where elements are rendered in their default display value: block and inline.

HTML

<div class="container">
 <div class="box box-1">Box 1</div>
 <div class="box box-2">Box 2</div>
 <div class="box box-3">Box 3</div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container {
    width: 50%;
    height: 60vh;
}
.box {
    margin: 0 auto;
    width: 150px;
    height: 150px;
    background: red;
    border: 1px dotted #fff;
    text-align: center;
    padding-top: 55px;
    font-size: 22px;
    color: #fff;
}
.box-2 {
    background: green;
}

We have three block element div. Even though we have given them width, they occupy whole width of the document.

Notice that we have not declare position: static property but elements appear as they would in normal flow.

Position Relative Vs Position Absolute

We can use position relative and absolute to move elements but there are differences you need to look out for.

Position: relative

Position relative moves elements in relation to it’s position in the normal flow.

 It does not effect the position of other elements in the normal flow of document.

.box-2 {
    background: green;
    position: relative;
    top: 50px;
    left: 50px;
}

You can see with position: relative , we moved green box 50px top and left from it’s original position.

You can also see that position of other elements are unaltered. They do not occupy the space.

Position: absolute

Position absolute positions element in relation to it’s containing/parent element.

.container {
    width: 50%;
    height: 60vh;
    position: relative;
}

.box {
    margin: 0 auto;
    width: 150px;
    height: 150px;
    background: red;
    border: 1px dotted #fff;
    text-align: center;
    padding-top: 55px;
    font-size: 22px;
    color: #fff;
}

.box-2 {
    background: green;
    position: absolute;
    top: 0px;
    left: 0px;
}

Since we are moving green box in relation to its parent element .container, we have to give position: relative property to that element.

Here we moved green box to the top left corner of parent element.

If there is no parent element or if position:relative is not declare in parent element then window document is used as parent element by position:absolute.

.container {
    width: 50%;
    height: 60vh;
    border: 3px dotted black;
}
.box-2 {
    background: green;
    position: absolute;
    top: 0px;
    right: 0px;
}

Here we didn’t give position:relative property to .container element so green box used window document as parent element.

It moved to the top right corner of document outside it’s dotted parent container.