Perché il mio margine non funziona con la posizione: riparato?

Question

JSFiddle Demo

Ho un div per un'intestazione e un div per un content wrap.

Per qualche motivo, non posso avere un margine nella parte inferiore dell'intestazione che impone al contenuto di avvolgere verso il basso. Lo ignora completamente e non ho idea del perché.

Qualcuno sa cosa sta succedendo con questo? Non lo fa quando tolgo la posizione: fissa; attributo sull'intestazione, ma voglio che sia corretto in alto, quindi quando lo scorrimento dell'intestazione è sempre visibile.

Sperando che qualcuno possa spiegare perché questo accada o almeno come si chiama così posso google.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
\t font-family: arial; 
 
\t background: #5A9910; 
 
\t text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
\t width: 100%; 
 
\t margin: 0 auto; 
 
\t text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
\t position: fixed; 
 
\t width: 100%; 
 
\t background: #ffffff; 
 
\t -webkit-box-shadow: 0 8px 6px -6px #333; 
 
\t -moz-box-shadow: 0 8px 6px -6px #333; 
 
\t box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
\t width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
\t width: 80%; 
 
\t height: 1600px; 
 
\t background: #ccc; 
 
\t margin: 0 auto; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

Answer 1

penso che devi dichiarare esplicitamente la posizione di div fisso.

div.header { 
position: fixed; 
width: 100%; 
background: #ffffff; 
top:20px; 
-webkit-box-shadow: 0 8px 6px -6px #333; 
-moz-box-shadow: 0 8px 6px -6px #333; 
box-shadow: 0 8px 6px -6px #333; 
} 

e assegnare margine il contenuto div

div.contentwrap { 
width: 80%; 
height: 1600px; 
background: #ccc; 
margin: 80px auto; 
} 

controllo questo violino se opere come avete bisogno: https://jsfiddle.net/0cmvg92m/3/

Answer 2

margine non funziona perché la posizione dell'intestazione è fisso.

È necessario utilizzare padding-top nel proprio contenuto.

Answer 3

L'intestazione ha la proprietà position:fixed. Quindi il margine applicato all'intestazione non influisce sulla sezione del contenuto.

Per risolvere questo problema, è necessario dare uno margini o padding alla contentwrap elemento

Answer 4

Quando si imposta un elemento a position: fixed;, si rimuove dal "flusso normale documento". Immagina che il tuo sito web sia un fiume, e lo stai osservando dall'alto. Ogni elemento è una roccia in quel fiume. Qualsiasi margin che hai applicato ai tuoi elementi è come un campo di forza attorno a una di quelle rocce.

Quando si imposta position: fixed; su una di quelle rocce, si sta essenzialmente tirando fuori dal fiume in modo che la roccia, in sostanza, galleggia sopra il fiume a mezz'aria. La roccia e il flusso d'acqua del fiume ti sembreranno uguali, perché sei sopra guardando verso il basso, ma la roccia non interagisce più con il flusso del fiume.

Se hai applicato margin a quella roccia, quel campo di forza intorno alla roccia non trattiene più acqua, perché la roccia è sospesa a mezz'aria grazie alla sua proprietà position: fixed;. Quindi non c'è acqua o altre rocce (altri elementi) da cui deve prendere le distanze. Il campo di forza della tua roccia (il margine del tuo elemento) sta spingendo contro l'aria sottile, quindi nulla nel fiume sarà influenzato.

Ma una foto vale più di mille parole, come dice il proverbio:

Quest'uomo non è veramente calci sopra la Torre di Pisa, ma sembra sicuro di simile! In questo esempio, lo sfondo dell'immagine, inclusa la Torre di Pisa, è la tua pagina (o il tuo 'flusso di documenti normale'), e l'uomo è un elemento (o la roccia del nostro ultimo esempio) con position: fixed; applicato.

Maggiori informazioni sulla posizione here e, più aggiornato, here.

Un modo per risolvere questo problema è quello di impostare l'intestazione top: 20px; z-index: 2; per assicurarsi che sia posizionato nella parte superiore e sopra di ogni altro elemento sul piano z, e quindi invia il corpo position: relative; e margin-top pari all'altezza del intestazione (in questo caso, 52px) più il valore della proprietà top dell'intestazione. Per aumentare lo spazio tra la tua intestazione e il tuo corpo, aumenta semplicemente la quantità margin-top. Questo è talvolta chiamato l'approccio "sticky header/footer". Ecco una demo:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
    background: #5A9910; 
 
    text-align: center; 
 
} 
 

 
/* ==========================Main wrap for page==*/ 
 
div.wrap { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    text-align: left; 
 
} 
 

 
/* ==========================Header with logo==*/ 
 
div.header { 
 
    position: fixed; 
 
    top: 20px; 
 
    z-index: 2; 
 
    width: 100%; 
 
    background: #ffffff; 
 
    -webkit-box-shadow: 0 8px 6px -6px #333; 
 
    -moz-box-shadow: 0 8px 6px -6px #333; 
 
    box-shadow: 0 8px 6px -6px #333; 
 
} 
 

 
/* ==========================Header logo image==*/ 
 
img.headerlogo { 
 
    width: 30%; 
 
} 
 

 
/* ==========================Content wrapper==*/ 
 
div.contentwrap { 
 
    width: 80%; 
 
    height: 1600px; 
 
    background: #ccc; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    margin-top: 72px; 
 
}

<div class="wrap"> 
 
    <div class="header"> 
 
     <p>Header</p> 
 
    </div> 
 
    <div class="contentwrap"> 
 
     <p>Test</p> 
 
    </div> 
 
</div>

P.S. position: fixed; è una proprietà CSS (una coppia valore-proprietà, per essere precisi), non un attributo HTML.