Advertisement

Advertisement


CSS Position

The position property is used to set the position of an element in the webpage.

After setting the position property for an element, that element can further be positioned using the top, bottom, left, right properties.

There are four different position values:

  • Static
  • Fixed
  • Relative
  • Absolute

Static Position

It is the default value for html elements. A static positioned element gets positioned according to the normal flow of the page. These elements will get displayed wherever they are coded in the webpage.

These elements are not affected by the top, bottom, left, right, and z-index properties.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Static Position </title>
<meta charset="UTF-8">
<style>
.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Static Positioning</h2>
<p>An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>

Output

CSS Static Position

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This div element has position: static;


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Static Position </title>
<meta charset="UTF-8">
<style>

.box{
color: #fff;
background: #00c4cc;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor. </p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi tincidunt. </p>
</div>
</body>
</html>

Output

CSS Static Position

Static Positioned Box

Note: This box is positioned static, which is default. It is always positioned according to the normal flow of the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus.

Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.


Relative Position

The value relative is used to set the element according to its normal position. Suppose, we apply left:50px; after position:relative;, then it will push the element 50px to the left from its normal position.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Relative Position </title>
<meta charset="UTF-8">
<style>
.relative {
position: relative;
left: 50px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Relative Positioning</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>

Output

CSS Relative Position
This div element has position: relative;


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Relative Position </title>
<meta charset="UTF-8">
<style>
.box{
position: relative;
left: 100px;
color: #fff;
background: #7dc765;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Relative Positioned Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam a.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt.</p>
</div>
</body>
</html>

Output

CSS Relative Position

Relative Positioned Box

Note: The left margin edge of this DIV box is shifted to right by 100px from its original position. The whitespace generated is preserved.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus.

Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.


Fixed Position

The fixed positioned element will get fixed on the browser. Look at the div at the bottom right of ur screens, it is positioned as fixed. It will not move even during scrolling.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Fixed Position </title>
<meta charset="UTF-8">
<style>
.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Fixed Positioning</h2>
<p>An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position: fixed; </div>
</body>
</html>

Output

CSS Fixed Position

Example of CSS Fixed Positioning

Look at the div at the bottom right of ur screens, it is positioned as fixed. It will not move even during scrolling.

This div element has position: fixed;


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Fixed Position </title>
<meta charset="UTF-8">
<style>
.box{
position: fixed;
top: 200px;
left: 100px;
color: #fff;
width: 60%;
background: #f44712;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Fixed Positioned Box</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, luctus dui.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt.</p>
</div>
</body>
</html>

Absolute Position

The absolute positioned element is used to position an element relative to its first non-static parent element. The top, right, bottom, and left properties specify its position from the edges of the block containing that element.


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Absolute Position </title>
<meta charset="UTF-8">
<style>
.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>Example of CSS Absolute Positioning</h2>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>

Output

CSS Absolute Position
This div element has position: relative;
This div element has position: absolute;


<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Absolute Position </title>
<meta charset="UTF-8">
<style>
.box{
position: absolute;
top: 200px;
left: 100px;
color: #fff;
width: 60%;
background: #4cafdf;
padding: 20px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px solid black;
font-family: Arial, sans-serif;
}
.container p{
line-height: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Absolute Positioned Box</h2>
<div><strong>Note:</strong> This box is absolutely positioned relative to the container DIV element.</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a .</p>
</div>
</body>
</html>

Output

CSS Absolute Position

Absolute Positioned Box

Note: This box is absolutely positioned relative to the container DIV element. It is scroll with the page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.

Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu.


All CSS Position Properties

Property Value Description
bottom auto, length, %, inherit It is used to set bottom margin for an element.
left auto, length, %, inherit It is used to set left margin for the element.
right auto, length, %, inherit It is used to set right margin for the element.
top auto, length, %, inherit It is used to set top margin for the element.
z-index number, auto, inherit It can be used to set elements over one another ordered like a stack by giving different z-index values.
clip shape, auto, inherit It is used to show only specific part of an element and the rest is clipped.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.