Positioning in CSS Positions...

CSS Positions

The most annoying part of styling is to position that one div which refuses to obey css commands. It's frustrating and mentally draining BUT why does this happen in the first place? This Article will help you understand the nature of various positions in CSS to prevent such things from happening. There are various types of CSS Positions. We will cover them here.

Position Static

Now this is a very common position, the default position of HTML is static, This position allows a normal flow of the document and displays things as they are ordered in HTML. The top,right,left,bottom, and z-index properties do not affect position: static.

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

CSS

  .parent{
}
.child1{
}
.child2{
}
.child3{
}

OUTPUT

Position relative

This position stacks on top of the position static as if it contained a z-index and stacks on top of the normal flow of the document. The Offset values of top,right,left and bottom shows it. For example

HTML

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

CSS

  .parent{
}
.child1{
    position: relative;
    left: 50px;

}
.child2{
}
.child3{
}

OUTPUT

When we add more offset parameters

CSS

  .parent{
}
.child1{
    position: relative;
    left: 50px;
    top: 20px
}
.child2{
}
.child3{
}

OUTPUT

Effect of position: relative on table-row,table-column,table-cell elements is undefined. Also, the relative position of the element does not affect the other elements positioned in the HTML Document

Position Absolute

The absolute position removes the element from the normal flow of the document and is positioned to the closest positioned ancestor, if there is no closest ancestor it will be placedrelative to the page. After which we can assign it the offset values of top,right,bottom,left which will decide its final position

HTML

<div class="parent">
    <div class="child1">There is</div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>

CSS

  .parent{
}
.child1{
    position: absolute;
    left: 100px;
    top: 30px;
}
.child2{
}
.child3{
}

OUTPUT

As you can see the child1 has been aligned according to the page and not according to its parent div. And the behavior of other elements is as if the child1 didn't exist.

Position Fixed

This is very similar to the absolute position as it will also be removed from the flow of the document/page. But fixed will always be relative to the document and is unaffected by scrolling. For example in the above HTML

.parent{
}
.child1{
    position: fixed;
    left: 100px;
    top: 30px;
}
.child2{

}

.child3{

}

OUTPUT

In the sample, you can see that even when scrolling the child1 has maintained its position according to the offset value as it is sticking to the document. It can be used to create floating elements that are always in the viewport

Position Sticky

This is a very unique position, sticky can be considered as a hybrid of the relative and fixed position. Until we reach the end of the viewport it acts as if it were relative and as soon as we cross the threshold of the viewport when scrolling, it starts behaving like a fixed. It requires at least one of the offset values to stick to.

This brings us to the end of our learning journey with CSS Position. Hope the article helped you. Thanks and Keep Learning