Position:static
- HTML elements are positioned static by default.
- Static position elements are not affected on top, bottom, left and right properties.
- It is always positioned according to the normal flow of the page.
- It changes the position from its normal position.
- Position:relative set using top, right, bottom and left properties.
- Its fixes the position of the element to the same place even if the page is scrolled.
- The top, right, bottom and left properties are used to position the element.
- It does not leave a gap in the page where the page is normally located.
- It defines the pixel value where the specified HTML will appear.
- The point of origin is the top-left of the browser.
Example: Demonstration of position property
<!DOCTYPE html>
<html>
<head>
<style>
div.static
{
position: static;
width: 260px;
border: 3px solid green;
}
div.relative
{
position: relative;
width: 300px;
height: 25px;
border: 3px solid orange;
left: 20px;
top: 5px;
}
div.absolute
{
position: absolute;
width: 260px;
height: 20px;
border: 3px solid green;
top: 135px;
left: 40px;
}
div.fixed
{
position: fixed;
top: 165px;
left: 10px;
width: 250px;
border: 3px solid orange ;
}
</style>
</head>
<body>
<h2>Position property</h2>
<div class="static">
This div element has static position.
</div>
<div class="relative">
This div element has a relative position.
</div>
<div class="absolute">
This div element has a absolute position
</div>
<div class="fixed">
This div element has a fixed position.
</div>
</body>
</html>
Output:
