CSS Position property (absolute | relative | static | fixed )
11-05-2017    822 times
CSS Position property

CSS Position property

The CSS Position property specifies the type of positioning method used for an element (static, relative, fixed or absolute). How an element positioned in a page is determine the position property of CSS. When a page is scrolling then the elements of the page may scroll with page or stay in the fixed position. The possible value of the position property are


1. static
2. relative
3. fixed
4. absolute


Explanation of CSS Position property

Tutorial at home


position: static

Static is the default value for every HTML elements. If we apply the static for position property then top, bottom, left, and right properties are not effect on that element. The elements (which set as position : static)are always position according to the normal flow of the page.

Note: If an element’s position value static then it never called “positioned” element anyway.

.static
{
background:#99FFCC;
position:static;
padding:10px;
}


position: relative

If we set the value of CSS Position property specifies is relative, then it is placed to its normal position as per the content of the page. The top, right, bottom, and left properties are relatively-positioned the element away from its normal position.


position: absolute

If we set the value of CSS Position property specifies is absolute, then it is placed to its normal position related to its viewport or browser (like positioned as fixed). Generally it uses the document body, and moves along with page scrolling.


Here is a simple example:
CSS CODE

.absolute
{
position: absolute;
top: 100px;
right: 0;
width: 250px;
height: 50px;
border: 3px solid #73AD21;
}
.relative
{
position: relative;
width: 250px;
height: 50px;
border: 3px solid #ff22ff;
}


HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>position Property Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="absolute">Absolute Position Of Box. Related To window.</div>
<div class="relative">Relative Position Of Box. Related To Content.</div>
</body>
</html>

positon-details
Position Details


position: fixed

If we set the CSS Position property specifies as position: fixed; then the position of the elements never changed. i.e. it is it always placed in the same place of the page even if the page is scrolled. We can also set the top, right, bottom, and left properties of the element.Following example set a div at the bottom center of the window.

CSS Code

Tutorial at home

.fixedBottom
{
left:25%;
bottom:0;
width:50%;
position:fixed;
border: 3px solid #73AD21;
}


HTML CODE

<!DOCTYPE html>
<html>
<head>
<title>Fixed Bottom Center</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="fixedBottom"> Bottom Center To The Window. Related To window.</div>
</body>
</html>

positon-bottom-center
Position At Center Bottom

An example show top bar and left right button

CSS Code

.static
{
background:#99FFCC;
position:static;
padding:10px;
}
.relativeLeft
{
background:#FF00FF;
position:relative;
float:left;
height:50px;
padding:10px;
z-index:1;
}
.relativeRight
{
background:#FF0000;
position:relative;
float:right;
height:50px;
padding:10px;
z-index:1;
}
.absoluteLeft
{
background:#FF55ff;
position:absolute;
float:left;
height:50px;
padding:10px;
z-index:1;
}
.absoluteRight
{
background:#FF5511;
position:absolute;
float:right;
height:50px;
padding:10px;
z-index:1;
left:300px;
}
.fixed
{
background:#0000CC;
position:fixed;
width:102%;
color:white;
left:-2px;
top:-2px;
height:30px;
text-align:center;
padding:5px;
z-index:2;
}
.fixedBottom
{
left:25%;
bottom:0;
width:50%;
position:fixed;
border: 3px solid #73AD21;
}

Tutorial at home
Tutorial at home

 HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Fixed Bottom Center</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="fixed"> fixed Top Bar </div>
<br><br><br><br><br><br><br><br><br><br>
<strong>Relative Button Demo:</strong><br>
<div class="relativeLeft"> left Button </div>
<div class="relativeRight"> right Button </div>
<br><br><br><br><br><br>
<strong>Absolute Button Demo:</strong><br>
<div class="absoluteLeft"> left Button Demo test </div>
<div class="absoluteRight"> right Button </div>
<br><br><br><br><br>
<strong>Static Button Demo:</strong><br>
<div class="static"> Static Button Demo test </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="fixedBottom">Bottom Center To The Window. Related To window.</div>
</body>
</html>

positon demo
Position Demo
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post