* { box-sizing: border-box; }

body{
	margin:50px;
	padding:0;
	background: #ff0;
}

/* 
absoulte
relative
fixed
static 
*/

.square{
	width: 250px;
	height: 250px;
	background: #000;
	padding: 15px;
	margin: 0 0 20px 0;
}

.circle{
	width: 50px;
	height: 50px;
	background: #fff;
	border-radius: 100%;
}

.white { background: #fff;}
.blue { background: #00f;}

.static { position: static;}
.relative { position: relative;}
.absolute { position: absolute;}
.fixed { position: fixed;}

.square.fixed {
	top: 0;
	right: 0;
}
.relative.white{
	top: 20px;
	left: 10px;
}

.absolute.white { 
	bottom: 0;
	right: 0;
}

.absolute.white.centered {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%,-50%);
}

h1{
	position: fixed;
	top: 20px;
	right: 20px;
	color: #f00;
	margin:  0;
	padding: 0;
	z-index: 1;
}