2012-09-13 15 views
6

he hecho un div y me han dado la posición que: fijo utilizando esta hoja de estilo:div después de un div qué posición se fija en css

CSS

position: fixed; 
top: 35px; 
z-index: 9999; 
height:60px; 
background:#000; 
width:100%; 

Ahora lo que quiero es : si este div tiene una altura cero, entonces el div que está justo después debe venir en lugar del div anterior. si la altura de div no es cero, el siguiente div después de este div debería tener un margen del div anterior para que ambos div no se superpongan entre sí.

+0

¿Se puede usar jQuery? – Gustonez

+0

sí, puedo. Pero preferiré css si hay alguna solución por css.i actualmente estoy usando jquery.first, configuré la pantalla de div fijo no es. En el evento de carga de página lo he expandido por jquery y luego tengo el un margen para el siguiente div.but el aspecto y la sensación de esto, es muy weared – mjdevloper

Respuesta

9

Cuando tiene un elemento que es fijo (o absoluto), no hay ningún elemento después de él. El elemento fijo se saca del flujo de documentos.

Si desea dos elementos uno detrás de otro en una posición fija, haga un contenedor que esté fijo y coloque los dos elementos en su interior.

Puede colocar otro contenedor con un margen superior a su alrededor, y establecer un margen superior en el segundo elemento. Si el primer elemento está vacío, no hay nada para tener un margen, por lo que el margen colapsará fuera del contenedor y el segundo elemento estará en la parte superior del contenedor.

(El segundo recipiente es necesaria porque el margen no se derrumbe fuera del elemento fijo.)

Demostración: http://jsfiddle.net/Guffa/r5crS/

+0

de acuerdo. y puede seleccionar el segundo elemento (y cada elemento después) por .fixedCont div + div {margin-top: 10px;} – Ege

2

Si usted podría utilizar jQuery:

$(document).ready(function() { 
    var height = $("#one").height(); 
    if(height > 0) 
    { 
     $("#two").css("margin-top","10px"); 
    } 
}); 

Demo

1

Otros carteles son correctos en esa configuración position: fixed para un elemento de diseño rompe el documento fl Ay; que a veces se pretende (como para una navegación de posición fija).

Aquí hay un fragmento de jQuery que he usado para evitar el problema en los diseños líquidos, donde la altura de la navegación puede cambiar:

var menuHeight = $("header").height(); 
$("main").css("padding-top", menuHeight); 
$(window).resize(function() { 
    var menuHeight = $("header").height(); 
    $("main").css("padding-top", menuHeight); 
}); 

principal es el contenido principal en mi sitio, ya que el ancho de la la página cambia el relleno en la parte superior de los cambios del contenido principal a la altura del elemento del encabezado, lo que imita que esté en el flujo del documento.

Nota: el código se ejecuta una vez en la carga (para diferentes tamaños de dispositivo) y en el tamaño de la ventana (para cambiar el tamaño de la ventana del usuario). Esto podría ser más ordenado, pero funciona bien para mí.

Cuestiones relacionadas