What is positioning in CSS?

Positioning in CSS means, to set the position of an element in the webpage. The property used in positioning is CSS position.

Positioning in CSS is an important concept for web designers. It is used for creating well-structured web pages with proper element positioning.

Have you noticed fixed sidebars or navbars in websites? Those get fixed using positioning in CSS. The >position property has a value, fixed; it stops the movement of element in the webpage. In this way you can create fixed navbars and sidebars.

Different types of Positioning in CSS

The CSS position property have diferent values that provide different features for positioning in CSS. All these values have a distinct way to handle elements:

Position Static
Position Fixed
Position Relative
Position Absolute
Position Sticky

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

CSS Position Static

CSS Position static 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.

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

Example Try this code »

<!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;

Example Try this code »

<!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.

CSS Position relative

CSS Position 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.

Example Try this code »

<!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;

Example Try this code »

<!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.

CSS Position Fixed

CSS Position fixed will fix the element in the viewport. The example of position fixed is the div at the bottom right of this webpage. It is positioned as fixed; it will not move even during scrolling.

Example Try this code »

<!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;

Example Try this code »

<!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>

CSS Position Absolute

CSS Position absolute 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.

Example Try this code »

<!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;

Example Try this code »

<!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.

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.

Recommended :

1 . How float work in CSS ?
2 . Html Paragraph Tag
3 . Google, BootStrap and Fontawesome Icons in CSS
4 . Learn CSS Navigation Bar

5 . How to make tooltip more Interactive using CSS
6 . Change property using Attribute Selector
7 . Create Youtube Thumbnail Generater in PHP
8 . BootStrap 4 Photography Snippets

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors