There are five types of positions in CSS:
Z-INDEX:
We have height and width (x, y) as 2 dimensions. Z is the 3rd dimension. An element in the webpage comes in front of other elements as its
z-index value increases. 
STATIC:
position: static is the default value. Whether we declare it or not, elements are positioned in a normal order on the webpage.RELATIVE:
"position : relative" allow us to change the position of the elements according or relative to its older position. By writing "position : relative" we are now free to set the new position of the element.
ABSOLUTE:
Now in order to understand the absolute , we need to recall the relative first. Since relative sets the new position of the element relative to its own position but in absolute it sets the position absolute to its parent element (in which the element lies) or simply if has no parent element then we can say according to the webpage. If we set position : absolute then the element will be placed at the top left corner of the page
position : absolute;
right : 5px; /*these are called are helpers to set the absolute position*/
bottom: 0px
That simply means to set the position of the element 5px from the right and 0px from the bottom absolute to its parents element
Example:
<!DOCTYPE html>
<html>
<head>
<title>Absolute Position</title>
<style>
.b1{
width : 30%;
height:50px; /*height should be given in px*.
background:#0099CC;
text-align:center;
font-size:16px;
position:absolute;
bottom:10px;
}
.b2{
width : 30%;
height:50px;
background:#9933CC;
text-align:center;
font-size:16px;
position:absolute;
top:10px;
right:80px;
postion:absolute;
}
</style>
</head>
<body>
<button class="b1">Button-1</button>
<button class = "b2">Button-2</button>
</body>
</html>
FIXED:
The only difference between absolute and fixed is that the absolute set position according to parent element whereas the fixed can only sets the elements as per the html or the webpage. It is not affected by the scrolling.
STICKY:
Position first works as a relative but it also contains a feature of fixed that it is affected by the scrolling. So it is nothing wrong in saying that position : sticky is the mixture of both relative and fixed.
Note: We may float our stuff to the desired side by simply:
float : right
This will flow the element towards right.
FLOAT:
Float is used for the positioning of elements with the help of following syntax:
float : left --> This will help to float/move the elements left side of the page.
0 Comments