The Developer Brains


CSS3 POSITION

Web Designing | Web Development


SEE MORE














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



SEE MORE




















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



























If we want to fix the position of a div, we use...?
1. {position: absolute}
2. {position: fixed}
3. {position: fix}
4. {position: relative}



Check Now



CSS3 QUIZ







Next: CSS3 Width Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers