Tutorial At Home

Prev Next

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

4130 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

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>
 
<div class="absolute">Absolute Position Of Box. Related To window.</div>
<div class="relative">Relative Position Of Box. Related To Content.</div>
</body>
</html>

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

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

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>
 
Relative Button Demo: 
<div class="relativeLeft"> left Button </div>
<div class="relativeRight"> right Button </div>
 
Absolute Button Demo: 
<div class="absoluteLeft"> left Button Demo test </div>
<div class="absoluteRight"> right Button </div>
 
Static Button Demo: 
<div class="static"> Static Button Demo test </div>
 
<div class="fixedBottom">Bottom Center To The Window. Related To window.</div>
</body>
</html>

Prev Next

CSS BOX MODEL (How to Design a Div) CSS Overflow Property | excess text in a div

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.