×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
CSS BOX MODEL (How to Design a Div) CSS Overflow Property | excess text in a div
CSS Position property (absolute | relative | static | fixed ) - CSS 3.0
3149    Arnab De    11/05/2017

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

softetechnologies


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

softetechnologies

.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;
}

softetechnologies

 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
CSS BOX MODEL (How to Design a Div) CSS Overflow Property | excess text in a div
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.
Enter New Comment
Comment History
No Comment Found Yet.
Nelson Mandela
Education is the most powerful weapon which you can use to change the world.
Nelson Mandela
2710
34.21
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33611
28/06/2017     29530
02/08/2017     27024
26/05/2018     26987
15/05/2017     23239
06/07/2017     21773
01/08/2017     21320
25/06/2018     20150
21/04/2018     18620
14/07/2017     16470
softetechnologies