Tema: Distancia entre divs
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 13/03/2015, 20:50
Avatar de fede5426
fede5426
 
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 5 meses
Puntos: 208
Respuesta: Distancia entre divs
Mira, mejor no te lo puedo explicar jaja

http://codepen.io/anon/pen/myzZNP

Dejo el codepen, y el codigo aca por las dudas:

Código HTML: 
Ver original
  1. <body>
  2.   <div id="primera">
  3.     Primera con position static por defecto
  4.     <div id="segunda">
  5.       Segunda con position static por defecto
  6.       <div id="tercera">Tercera con position absolute se ubica en los bordes del body</div>
  7.     </div>
  8.   </div>
  9. <br><br>
  10.   <div id="cuarta">
  11.     Cuarta con position static por defecto
  12.     <div id="quinta">
  13.       Quinta con position relative
  14.       <div id="sexta">Sexta con position absolute, se ubica en los bordes de la quinta</div>
  15.     </div>
  16.   </div>
  17.   <br><br>
  18.   <div id="septima">
  19.     Septima con position relative
  20.     <div id="octava">
  21.       Octava con position static por defecto
  22.       <div id="novena">Novena con position absolute, se ubica en los bordes de la septima</div>
  23.     </div>
  24.   </div>
  25. </body>

Código CSS: 
Ver original
  1. body{
  2.   color:#fff;
  3. }
  4.  
  5. #primera{
  6.   width:600px;
  7.   margin:1em auto;
  8.   background-color:#f00;
  9.   padding:2em;
  10. }
  11.  
  12. #segunda{
  13.   background-color:#00f;
  14.   height:200px;
  15.   padding:1em;
  16. }
  17. #tercera{
  18.   background-color:#000;
  19.   padding:1em;
  20.   width:150px;
  21.   height:150px;
  22.   position:absolute;
  23.   top:0;
  24.   right:0;
  25. }
  26.  
  27. #cuarta{
  28.   width:600px;
  29.   margin:1em auto;
  30.   background-color:#f00;
  31.   padding:2em;
  32. }
  33.  
  34. #quinta{
  35.   background-color:#00f;
  36.   height:200px;
  37.   padding:1em;
  38.   position:relative;
  39.   
  40. }
  41. #sexta{
  42.   background-color:#000;
  43.   padding:1em;
  44.   width:150px;
  45.   height:150px;
  46.   position:absolute;
  47.   top:0;
  48.   right:0;
  49. }
  50.  
  51. #septima{
  52.   width:600px;
  53.   margin:1em auto;
  54.   background-color:#f00;
  55.   padding:2em;
  56.   position:relative;
  57. }
  58.  
  59. #octava{
  60.   background-color:#00f;
  61.   height:200px;
  62.   padding:1em;
  63. }
  64.  
  65. #novena{
  66.   background-color:#000;
  67.   padding:1em;
  68.   width:150px;
  69.   height:150px;
  70.   position:absolute;
  71.   top:0;
  72.   right:0;
  73. }

De nuevo, espero te sirva.. saludos!