The position property specifies how elements are placed in a document.

CSS position property

In this article, we gonna learn everything you need to know about CSS position property. Now the main Question is what is position property in CSS and why we use it. Don’t worry, here is your answer.

What is position in CSS?

The position property specifies how elements are placed in a document. Elements are placed using the topleftbottom, and right properties. The topleftbottom, and right properties define the final location of positioned elements.

Different position values.

There are five different position values.

  • static
  • relative
  • fixed
  • absolute
  • sticky

Static Position

Static position is a by default position value. The static position elements do not affect top, left, right, button, and z-index properties. The static position element, not positioned in any special way. These elements are always positioned according to the normal flow of the document.

position: static;

Relative Position

Relative is a normal position of the element. We can adjust the relative position elements by setting the top, bottom, right and left properties value. After setting up the top, bottom, left, or right properties values, no other content you can adjust to fit into any gap left by the element.

For Example:

<!DOCTYPE html>
<html>
<head>
	<title>Position property</title>
<style >
			.main-container{
						width: 100%;
						height: 500px;
						background:#ee9;
				}
			.box{
  					width: 20%;
  					height: 30%;
					position: relative;
  					background:#73AD21;
  					left: 30%;
  					top:6%;
}

	</style>
</head>
<body>
	<div class="main-container">
		<div class="box"></div>
	</div>

</body>
</html>

As a Result:

Absolute position:

An absolute position element, positioned relative to the nearest positioned ancestor. Absolute elements can either be bounded by the parent element or the viewport. The viewport is a default boundary. If you want to use the parent element as a boundary. It is possible if the parent has a relative position otherwise they cannot serve as a boundary.
Remember that a “positioned” element is one whose position is anything except static.

For Example:

<!DOCTYPE html>
<html>
<head>
	<title>Position property</title>
	<style type="text/css">
			.main-container{
						 position: relative;
  						 width: 400px;
  						 height: 200px;
  						background:#ee9;
				}
			.box{
  					 position: absolute;
  					 top: 80px;
  					 right: 0;
  					 width: 200px;
  					 height: 100px;
  					 background:#73AD21;

	</style>
</head>
<body>
	<div class="main-container">
		<div class="box"></div>
	</div>

</body>
</html>

As a result:

Fixed Position

A fixed position element, positioned relative to the viewport boundary. Which means it always stays in the same place even if you scroll the page. However,The top, right, bottom, and left properties, used to set the position of an element. A fixed element does not leave a gap in the page where it would normally have been located.

For Example:

<!DOCTYPE html>
<html>
<head>
	<title>Position property</title>
	<!-- <link rel="stylesheet" type="text/css" href="position.css"> -->
	<style type="text/css">
			.main-container{
						width: 100%;
						height: 900px;
						background:#ee9;
						/*position: relative;*/
				}
			.box{
  					  position: fixed;
   					  top: 4%;
   					  right: 6%;
   					  width: 300px;
   					  height: 20%;
   					  border: 3px solid #73AD21;
}

	</style>
</head>
<body>
	<div class="main-container">
		<div class="box"></div>
	</div>

</body>
</html>


As a result.

Sticky Position

Sticky position is a combination of the fixed position and the relative position. However, it is based on the user’s scroll position. They are positioned relative until a given offset position is met in the viewport – then it “sticks” in place (like fixed position). It is bounded by the parent element.

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of toprightbottom or left for sticky positioning to work.

For Example:

<!DOCTYPE html>
<html>
<head>
	<title>Position property</title>
	<!-- <link rel="stylesheet" type="text/css" href="position.css"> -->
	<style type="text/css">
			.main-container{
						width: 100%;
						height: 900px;
						background-image: url("pic/4.png");
						/*position: relative;*/
				}
			.box{
  					  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 2%;
  background-color: #1ee;
  width: 100%;
  height: 5%;

}

	</style>
</head>
<body>
	<div class="main-container">
		<div class="box"></div>
	</div>

</body>
</html>


As a Result
:

Hey, guys hope it helps. if you have any query regarding this you can ask in comment section.

Recommended Posts:

Box shadow effect in css

Most Popular CSS Frameworks in 2020

What is event in JavaScript?

What is the Console in JavaScript.

Reference:

w3school.com

Leave a Reply

Your email address will not be published. Required fields are marked *