CSS : position

In CSS, the position property is used to specify the positioning behavior of an element within its containing parent or the entire document. It determines how an element is placed and positioned in the layout of a web page.

The position property accepts several values, each defining a different positioning behavior. Here are the commonly used values:

1. static (default): This is the default position value. Elements with position: static are positioned according to the normal flow of the document. They are not affected by the top, right, bottom, left, or z-index properties.
2. relative: When an element is positioned relative, it is positioned relative to its normal position in the document flow. You can use top, right, bottom, and left properties to offset the element from its normal position. Other elements are not affected, and they will still occupy the original space.
3. absolute: Elements positioned absolute are removed from the normal document flow and positioned relative to their closest positioned ancestor (parent) that has a position other than static. If no positioned ancestor is found, the element is positioned relative to the initial containing block, which is usually the document's viewport. top, right, bottom, and left properties can be used to specify the exact position.
4. fixed: Elements positioned fixed are removed from the normal document flow and are positioned relative to the initial containing block (viewport) at a specified position, which remains fixed even when the page is scrolled. top, right, bottom, and left properties can be used to set the exact position.
5. sticky: Elements with position: sticky are positioned based on the user's scroll position. They behave like relative elements until the user scrolls to a specified threshold, at which point they become fixed and remain in a fixed position.

For elements with absolute or fixed values set as the value of the position attribute, the display attribute is changed to block.

.container {
	width : 300px;
	background-color: royalblue;
}

.container .item {
	border: 4px dashed red;
	background-color: orange;
}

.container .item: nth-child(1) {
	width: 100px;
	height: 100px;
}

.container .item: nth-child(2) {
	width: 100px;
	height: 100px;
	position: relative;
	right: 30px;
	bottom: 200px;
}

.container .item: nth-child(3) {
	width: 100px;
	height: 100px;
}

.container {
	width : 300px;
	background-color: royalblue;
}

.container .item {
	border: 4px dashed red;
	background-color: orange;
}

.container .item: nth-child(1) {
	width: 100px;
	height: 100px;
}

.container .item: nth-child(2) {
	width: 100px;
	height: 100px;
	position: relative;
	right: 30px;
	bottom: 200px;
}

.container .item: nth-child(3) {
	width: 100px;
	height: 100px;
}