</CSS3 Position Property>

Apply position property on different HTML elements

Position Property

We can use different CSS position property on html elements.

static
relative
fixed
absolute
sticky

STATIC POSITION

An element with static position is always positioned according to the normal flow of the page.


	<style>
		div{
			position: static;
			border: 3px solid #73AD21;
		}
	</style>


	<!DOCTYPE html>
<html>
	<head>
	<style>
	p{
		position: static;
		border: 5px solid black;
	}
</style>
	</head>
<body>
<p>TDB Tutorials</p>
</body>
</html>

Try it Yourself

RELATIVE POSITION

An element with position: relative; is positioned relative to its normal position.
We can set the top, right, bottom, and left properties on a relative positioned element then it will cause it to be adjusted away from its normal position. We can't fit other contents into any gap left by the element.

	
		<style>
			div{
				position: relative;
				right: 30px;
				border: 5px solid black;
			}
		</style>

		
			<!DOCTYPE html>
		<html>
			<head>
			<style>
			p{
				position: absolute;
				border: 5px solid black;
				bottom:0;left:0;
			}
			div{
				position: relative;
				height:400px;
				border: 2px solid red;
			}
		</style>
			</head>
		<body>
		<div>
		<p>TDB Tutorials</p>
		</div>
		</body>
		</html>

Try it Yourself

FIXED POSITION

An element of fixed position is always positioned relative to the viewport, means it always stays in the same position even if the page is scrolled. The four properties are used to position the element (top, right, bottom, and left). Note: You can see a pink circle in this page (bottom right cornor.). This is the example of fixed element.

	
	<style>
		div{
			position: fixed;
			bottom: 0;
			right: 0;
			width: 100px;
			border: 5px solid black;
		}
	</style>

			
				<!DOCTYPE html>
			<html>
				<head>
				<style>
				body{height:1000px}
				p{
			position: fixed;
			bottom: 0;
			right: 0;
			width: 100px;
			border: 5px solid black;
				}
			</style>
				</head>
			<body>TDB EDITOR
			<p>TDB Tutorials</p>
			</body>
			</html>

Try it Yourself

ABSOLUTE POSITION

When we use top, right, bottom, and left position properties on an element of absolute position, its always positioned with respect to it's parent element.

		
		<style>
			.parent-class{
				position: relative;
				right: 30px;
				border: 5px solid black;
				width:200px;
				height:200px;
			}
			  .child-class{
				position: absolute;
				top: 20px;
				left:20px;
				width: 50px;
				height: 50px;
				border: 5px solid red;
			  }
		</style>

Create a div element of the class name parent and create an element inside it with class name child. Now try it run the code.

	
		<!DOCTYPE html>
	<html>
		<head>
		<style>
		.parent{
			position: relative;
			border: 5px solid black;
			width:200px;
			height:200px;
		}
		  .child{
			position: absolute;
			top: 20px;
			left:20px;
			width: 50px;
			height: 50px;
			border: 5px solid red;
		  }
	</style>
		</head>
	<body>
	<div class="parent"><div class="child"></div></div>
	</body>
	</html>

Try it Yourself

STICKY POSITION

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in top place.

		
		<style>
			div{
				/* Safari */
			position: -webkit-sticky; 
			position: sticky;
			top: 0;
			background-color: green;
			border: 5px solid black;
			}
		</style>

Note: Not suppored by Internet Explorer, Edge 15 and earlier versions.

	
		<!DOCTYPE html>
	<html>
		<head>
		<style>
		body{height:1000px}
		div{
			/* Safari */
			position: -webkit-sticky; 
			position: sticky;
			top: 0;
			background-color: white;
			border: 5px solid black;
		}
	</style>
		</head>
	<body>
	Simple example of sticky position.<br>
	Tdb Editor
	<div>TDB Tutorials</div>
	</body>
	</html>

Try it Yourself

CSS3 POSITION

</CSS3 POSITIONING>

The CSS position property is used to sets how an element is positioned in on the top , right , bottom , and left position. CSS position properties determine the final location of positioned elements.

</CSS3 Position Property>

Position Property

STATIC POSITION

RELATIVE POSITION

FIXED POSITION

ABSOLUTE POSITION

STICKY POSITION