CSS Position
CSS Position is used to position our HTML element, sometimes we have to create a complex layout means a box on another box, a circle half inside the box, and half outside, to create such type of complex layout we need to use the position of CSS.
When we use CSS Position we have four directions top, bottom, left, right. These values are used to set the position of an element.
In a CSS there are four positions, which are following:
- Static Position
- Fixed Position
- Absolute Position
- Relative Position
Static Position
The static position is a default property of CSS. It positions an element in the normal flow of the page. It is not affected by top, right, bottom, and left properties.
Fixed Position
The fixed position is used to fix our element on a particular position like, fixing WhatsApp and phone icon on the bottom, fixing social media icons on left or right.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main
{
width:100%;
height:1000px;
background:#ddd;
}
.fix
{
width:100px;
height:100px;
background:#f00;
position:fixed;
top:200px;
right:0;
}
</style>
</head>
<body>
<div class="main">
</div>
<div class="fix"></div>
</body>
</html>
Output:
In this example, we have fixed a red box 200px from top and right side 0px, here the red box is fixed it will not scroll.
Absolute Position
Absolute position is used when we want to move our HTML element freely on a screen, which means we can move HTML elements wherever we want.
It is used with relative property, we have to give relative to its parent element if we don’t give relative to its parent then it moves according to body tag; body tag has a relative property by default.
To create a complex layout we use absolute property with the relative property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.main
{
width:100%;
height:1000px;
background:#ddd;
}
.box
{
width:300px;
height:300px;
background:#f00;
float:left;
margin:100px;
position:relative;
}
.circle
{
width:100px;
height:100px;
background:#000;
border-radius:50%;
position:absolute;
bottom:50px;
right:-40px;
}
</style>
</head>
<body>
<div class="main">
<div class="box">
<div class="circle"></div>
</div>
</div>
</body>
</html>
Output:
In this example you can see, the circle is half inside the box and half outside the box, this type of example is done by absolute and relative property. It is also used to create a menubar dropdown, mega menu, etc.
Relative Position
The relative position is mostly used with the absolute property as the parent element. We can also use this position individually but it’s rarely used individually. So I recommend you to use this position with absolute position.
Categories: web designing css
.svg)