Myprojects/frontend/s-10css positioning/discussion/index.css

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	height: 800vh;
}

.img-float{
	width: 250px;
	height: 250px;
	float: inherit;
}
.parent-element {
	background-color: skyblue;
	padding: 10px ;
	
}
.child-one {
	background-color: gray;
	padding: 10px ;
	
}
.child-two{
	background-color: yellow;
	padding: 10px ;

	position:relative;
	left:10px;
	bottom: 10px;
}
.child-three{
	background-color: gray;
	padding: 10px ;

	position: fixed;
}
.child-four{
	background-color: gray;
	padding: 10px ;

}
.container{
	position: relative;
}
.black-box{
	position: relative;
	z-index: 1;
	border: 2px solid black;
	height: 100px;
	margin: 30px;
}
.grey-box{
	position: absolute;
	z-index: 3;
	background-color: grey;
	height: 60px;
	width: 70%;
	left: 50px;
	top: 50px;
}
.green-box {
	position: absolute;
	z-index: 2;
	background-color:lightgreen ;
	height: 100px;
	width: 35%;
	left: 270px;
	top: -15px;
}
















/*.img-float{*/
	width: 250px;
	height: 250px;
	float: inherit;
}
/*.parent-element {*/
	background-color: skyblue;
	padding: 50px ;
	position: relative;
	height: 800vh;
}
/*.child-one {*/
	background-color: gray;
	padding: 10px ;
/*	Absolute - Elements with position: absolute are positioned relative to their parent elements. In this case, the element is removed from the normal document flow. The other elements will behave as if that element is not in the document. No space is created for the element in the page layout.*/
	position: absolute;
	left: 10px;
	bottom: 10px;
}
/*.child-two{*/
	background-color: yellow;
	padding: 10px ;
/*	Relative - relative remain in the normal flow of the document. But, unlike static elements, the left, right, top, bottom, and z-index properties affect the position of the element. An offset, based on the values of left, right, top, and bottom properties, is applied to the element relative to itself.*/
	position:relative;
	left:10px;
	bottom: 10px;
}
/*.child-three{*/
	background-color: gray;
	padding: 10px ;
/*	Fixed - Fixed-position elements are similar to absolutely positioned elements. They are also removed from the normal flow of the document. But unlike absolutely positioned elements, they are always positioned relative to the element.*/
	position: fixed;
}
/*.child-four{
	background-color: gray;
	padding: 10px ;
/*use in the nav bar	*/
/*Sticky - position: sticky is a mix of position: relative and position: fixed. It acts like a relatively positioned element until a certain scroll point and then it acts like a fixed element.*/
	position: sticky;
	top: 0px;

}
*/