Ejercicios

Ejercicio 10/10 || Propiedades de posicionamiento

Este es el ejercicio final! El ancho de las cajas azul y roja es el mismo y ocupan el 90% del espacio y se juntan justo en la mitad del espacio. La altura de ambas cajas es de 180 pixeles. Las dimensiones de la caja verde no cambian.
El texto de las cajas azul y roja se separa al 10% tanto del borde izquierdo como del derecho de sus propias cajas. El texto de la caja verde se mantiene como al inicio.
Las posiciones de las cajas azul y roja es estática, mientras que la de la verde es absoluta, y se separa al 60% del borde del espacio de trabajo. El orden en el eje Z de la caja verde debe ser menor al de las otras 2.

Código inicial

#blue {
  background-color: #8D94FF;
  width:100%;
  height: 60px;
  border: 1px solid #0000B0;  
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

#red {
  background-color: #E8B190;
  width:100%; 
  height: 60px;
  border: 1px solid #CC0000;  
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

#green {
  background-color: #CAE368;
  width:100%; 
  height: 60px;
  border: 1px solid #65B661;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

BLUE BOX BLUE BOX BLUE BOX BLUE BOX BLUE BOX BLUE BOX BLUE BOX

RED BOX RED BOX RED BOX RED BOX RED BOX RED BOX RED BOX RED BOX

GREEN BOX GREEN BOX GREEN BOX GREEN BOX GREEN BOX GREEN BOX