2012-08-06 22 views
10

¿Cómo puedo hacer que los elementos con position:absolute y tengan una altura dinámica de que ocupen espacio vertical utilizando solo css? ¿Hay algún truco con los contenedores y la pantalla que pueda usar?Espacio vertical en los elementos con la posición: absoluta

+0

'posición: absolute' significa que no ocupan espacio en el flujo. Por favor, publique un ejemplo de lo que está tratando de hacer –

+0

Estoy animando una serie de divs de derecha a izquierda en js usando posiciones, pero la estructura podría por cualquier cosa. Me preguntaba si tal vez había un truco no tan legal para hacerlo usar espacio vertical (tal vez no) – Yisela

Respuesta

9

Desafortunadamente, usar posicionamiento absoluto significa, por definición, que su elemento ya no ocupa espacio. Entonces, no, solo a través de CSS no hay forma de hacer esto.

Por supuesto, puede utilizar jQuery (o simple javascript) para lograr esto. Cómo lo haría es tener un elemento space al lado de cada elemento vertical. Encierre tanto el elemento espacio como el elemento vertical absolutamente posicionado en un div relativamente posicionado. En la carga de la página, cambie height del elemento espacio para que coincida con la altura del elemento vertical.

3

position: absolute significa que no ocupan espacio en el flujo. Sin embargo, no tiene que animar utilizando el margen, puede usar float para dejar que los elementos ocupen el espacio que sea necesario y hacer que cada uno de los elementos position:relative.

div.animate-me { 
    width: 300px; 
    margin: 20px; 
    float: left; 
    left: -1000px; // Make them start offscreen 
    position: relative; 
    border: 1px solid red; 
    visibility: hidden 
}​ 

$('div').css().animate({ 
    left: 0 
}); 

SAMPLEhttp://jsfiddle.net/qxzzX/1/

Cuestiones relacionadas