CSS Position

CSS Position lets you place the element anywhere. This is used when you cannot place the element by just using css float. Two commonly used position values are relative and absolute.

CSS Position takes the value of top, left, right and bottom css attributes to properly position the elements.

Position Relative

A relative position will place the component with regards to its parent element. For example,

.parent {
   height: 300px;
   width: 400px;
   background: #CCC;
}
.child {
   height: 100px;
   width: 100px;
   background: green;
   position: relative;
   top: 100px;
   left: 100px;
}
<div class="parent">
<div class="child">position: relative
</div>
</div>
Output
position: relative

Explanation

Relative positioning places the element relative on its parent element. Therefore, top 100px means to place the element 100px from the top edge of the parent element and left 100px means place the element 100px from the left edge of the element.

relative

Position Absolute

Absolute positioning is the same as relative but instead of placing the component relative to the parent element, absolute position will place the element relative to the whole document. Therefore, if we use the same example above and change the value of position from relative to absolute, the box will be place at the top of the whole document with 100px space from the top.

Share this tutorial!