/* position indica en qué punto se van a pintar */
/* saber donde se van a pintar las cosas es fundamental */

/*position: static;*/ /* van al sitio por defecto y
	no tienen en cuenta las coordenada top, left, rigth, bottom */
	
/*position: relative;*/ /*relativiza la posición del 
elemento hijo con respecto al origen del padre y se utilizan
coordenadas para posicionarlos --> generalmente top y left */

/* position absolute es como si no existiera con respecto 
a los otros elementos. Toma la posición con respecto al elemento padre más
próximo que tenga un position relative o static (pero no absolute) */	

/* position fixed siempre posiciona sus coordenadas con
   respecto al body y queda fijo aunque hagamos scrolling */	
	
.padre {
	width: 400px;
	height: 500px;
	margin: 25px;
	background-color: orange;	
}

/*
.padre > div {
	display: inline-block;
}	
*/

.hijo1 {	
	width: 50px;
	height: 50px;
	background-color: red;
	
}

.hijo2 {
	
	width: 100px;
	height: 100px;
	background-color: green;
	
		
}

.hijo3 {
	width: 100px;
	height: 100px;
	background-color: yellow;
	
}