Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/01/2014, 08:12
JustinKO
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 11 años, 10 meses
Puntos: 47
Duda con posicionamiento absolute en rejilla de bootstrap

Hola a todos. Seguramente esto es algo básico pero yo no soy capaz de saber el porqué. Os cuento a ver si alguno me puede aclarar un poco esto.

Estoy trabajando con la grid de bootstrap. El caso es tengo dos div que se activan u ocultan dependiendo de la pestaña que pulses y tengas activa.

Estos dos divs tienen a su vez otros dos div en el interior cada uno, uno de 7 columnas y otro de 5 columnas (total 12) de la rejilla de bootstrap, col-md-7 y col-md-5 respectivamente .

El método que utilizo para ocultarlos es con visiblility por lo que he de darle posición absoluta y top:0 para que estén en el mismo lugar.

El caso es que en cuanto le pongo la posición absoluta ya no me respeta el tamaño de los divs internos que tienen las clases de la rejilla .

Os copio el código simplificado para que sepáis a qué me refiero:
Código HTML:
Ver original
  1. <!--menu tabs-->
  2.   <ul class="nav nav-tabs">
  3.         <li class="active"><a href="#">Descripción</a></li>
  4.         <li ><a href="#">Más información</a></li>    
  5.       </ul>
  6.      
  7.      
  8.    <div id="cabecera_seccion">
  9.    
  10.             <!--contenedor descripcion-->        
  11.                  <div  class="visible caja_seccion">
  12.                    
  13.                     <div  class="col-md-7">
  14.                       <!--Contenido 7 columnas-->
  15.                       </div>
  16.                    
  17.                     <div class="col-md-5">
  18.                       <!--Contenido 5 columnas-->
  19.                     </div>
  20.                    
  21.                  </div>              
  22.                  
  23.                  
  24.                  <!--contenedor más informacion-->        
  25.                  <div class="oculta caja_seccion">
  26.                    
  27.                     <div  class="col-md-7">      
  28.                       <!--Contenido 7 columnas-->      
  29.                       </div>
  30.                    
  31.                     <div class="imagen_seccion col-md-5">
  32.                       <!--Contenido 5 columnas-->
  33.                       </div>
  34.                    
  35.                  </div>
  36.   </div>

Código CSS:
Ver original
  1. #cabecera_seccion{ 
  2.     position: relative;
  3. }
  4. .caja_seccion{
  5.     position: absolute;
  6.     top: 0px;  
  7. }
  8. .caja_seccion.oculta{
  9.     visibility: hidden;
  10. }
  11. .caja_seccion.visible{
  12.     visibility: visible;
  13. }

¿hay alguna razón especial por lo que al hacer position:absolute al div contenedor ya deje de respetar estos tamaños de la rejilla?

Saludos y gracias a todos