/* CSS POSITION */

body {
	border: 1px dashed black;
	height: 2000px;
}

div {
	padding: 10px;
}

#main {
	position: relative;
	height: 100%;
}

.absolute1 {
	position: absolute;
	border: 2px dashed;
	position:absolute;
	top: 0;
	width: 100%;
	height: 50px;
}

.absolute2 {
	position: absolute;
	border: 2px dashed;
	position:absolute;
	bottom: 0;
	width: 100%;
	padding-top: 50px;
	height: 50px;
}

.fixed {
	position: absolute;
	border: 2px dashed;
	bottom: 0;
}

.sticky {
	margin-top: 30px;
	position: sticky;
	border: 2px dashed;
	top: 0;
}

.relative {
	position: relative;
	border: 2px dashed;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	height: 500px;
	left: 20px;
	top: -20px;
}

.static {
	position: static;
	border: 2px dashed;
	margin-top: 50px;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

.border-blue {
	border-color: blue;
}

.border-green {
	border-color: green;
}

.border-pink {
	border-color: pink;
}

.border-red {
	border-color: red;
}


/* CSS STICKY */
.divzindex {
	width: 100px;
	height: 100px;
}

.test1 {
	background-color: red;
	position: absolute;
	z-index: 4;
}

.test2 {
	background-color: blue;
	position: absolute;
	left: 25px;
	top: 25px;
}

.test3 {
	background-color: green;
	position: absolute;	
	left: 50px;
	top: 50px;
	z-index: 2;
}

.test4 {
	background-color: yellow;
	position: absolute;	
	left: 75px;
	top: 75px;
}