2012-09-13 21 views
6

Ho fatto un div e mi hanno dato posizionarlo: fissa utilizzando questo foglio di stile:div dopo un div quale posizione sono stabiliti nel css

CSS

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

Ora quello che voglio è : se questo div ha altezza zero, allora il div che è subito dopo dovrebbe venire al posto del div precedente. se l'altezza del div non è zero, il div seguente dopo questo div dovrebbe avere un margine dal div precedente, quindi entrambi i div non si sovrapporranno l'un l'altro.

+0

puoi usare jQuery? – Gustonez

+0

sì, posso.pero preferisco css se c'è una soluzione da css.i sto attualmente usando jquery.first ho impostato la visualizzazione di div fisso è none.on evento di caricamento della pagina l'ho espanderla da jquery e poi ho il un po 'di margine per il prossimo div.but l'aspetto grafico di questo, è molto usurato – mjdevloper

risposta

9

Quando si ha un elemento fisso (o assoluto), non c'è alcun elemento dopo di esso. L'elemento fisso viene estratto dal flusso del documento.

Se si desiderano due elementi uno dopo l'altro in una posizione fissa, creare un contenitore che è fisso e inserire i due elementi al suo interno.

È possibile posizionare un altro contenitore con un margine superiore intorno a loro e impostare un margine superiore sul secondo elemento. Se il primo elemento è vuoto, non c'è nulla a cui avere un margine, quindi il margine verrà collassato all'esterno del contenitore e il secondo elemento sarà nella parte superiore del contenitore.

(il secondo contenitore è necessario perché il margine non crollerà al di fuori della parte fissa.)

Demo: http://jsfiddle.net/Guffa/r5crS/

+0

concordato. e puoi selezionare il secondo elemento (e ogni elemento dopo) da .fixedCont div + div {margin-top: 10px;} – Ege

2

Se si potesse utilizzare jQuery:

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

Demo

1

Altri poster sono corretti in quell'impostazione position: fixed per un elemento di layout interrompe il documento fl ow; che a volte è inteso (come per una navigazione di posizione fissa).

Ecco un frammento jQuery che ho usato per aggirare il problema nei layout liquidi, dove l'altezza della navigazione può cambiare:

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

principale è il contenuto principale sul mio sito, come la larghezza della pagina cambia il padding nella parte superiore del contenuto principale cambia all'altezza dell'elemento di intestazione, che lo imita nel flusso del documento.

Nota: il codice viene eseguito una volta al caricamento (per diverse dimensioni del dispositivo) e al ridimensionamento della finestra (per il ridimensionamento della finestra utente). Questo potrebbe facilmente essere più ordinato, ma funziona bene per me.