Posizione CSS assoluta - l'elemento posizionato successivo è il corpo?

Citando msdn:Posizione CSS assoluta - l'elemento posizionato successivo è il corpo?

"Oggetto è posizionato rispetto al Posizione- o l'oggetto corpo dell'elemento genitore se il suo elemento principale non è posizionato"

Diciamo che ho impostato un div con una certa dimensione sul fondo 0; e a sinistra: 0; non sarà posizionato nella parte inferiore del corpo ma in basso a sinistra di viewport. Anche quando si dà un margine al corpo, il div sarà ancora in basso a sinistra su viewport.

So come lavorare con queste proprietà ma sto cercando il ragionamento. Non è il corpo a cui si posiziona l'elem assoluto quando non è posizionato nessun altro antenato? Grazie!

Ecco il violino: http://jsfiddle.net/picbig/0p6rgv8f/

HTML:

<div id="large_box_greater_than_viewport"></div> 
<div id="absolute_cnt"></div>

CSS:

body{ 
    margin-left: 200px; 
} 
#large_box_greater_than_viewport{ 
    width: 900px; 
    height: 10000px; 
    background: red; 
} 
#absolute_cnt{ 
    position: absolute; 
    width: 65%; 
    bottom: 0; 
    left: 0; 
    height: 80px; 
    background: rgba(0,0,0,.7); 
}

fonte

2015-09-18 Max Width

Come rblarson scritto: quando la posizione: relativo viene impostato sull'elemento corpo si muove verso il basso di corpo. Ma questa impostazione sul corpo non dovrebbe essere predefinita in base alla dichiarazione di msdn (e molte altre fonti che affermano lo stesso)? –

Gli elementi posizionati in modo assoluto sono posizionati rispetto al relativo blocco contenitore.

fixed elementi posizionati rispetto allo initial containing block che prende le dimensioni dello viewport.

iniziale blocco contenitore

Il blocco contenitore in cui l'elemento radice vive è un rettangolo chiamato blocco contenitore iniziale. Per i media continui, ha le dimensioni del viewport ed è ancorato all'origine del canvas; è l'area della pagina per i media paginati.

E absolute elementi posizionati rispetto al loro blocco contenitore che è stabilito dal più prossimo con un position ad altro che static. Ad esempio fixed, absolute o relative.

Il punto chiave è:

Se non esiste tale antenato, il blocco contenitore è il blocco contenitore iniziale .

Pertanto tale elemento posizionato assoluto all'interno <body> non saranno collocati con il rispetto alla <body> stessa, ma al blocco contenitore iniziale, cioè la finestra.

http://www.w3.org/TR/CSS2/visudet.html#containing-block-details

fonte

2015-09-18 12:57:14

quindi è di fatto il viewport .... grazie per quello –

dovresti sempre leggere w3.org prima di andare a mdn, msdn ... grazie –

È necessario impostare la posizione del corpo:

body{ 
    margin-left: 200px; 
    position:relative; 
}

fonte

2015-09-18 12:38:04 rblarsen

Questo è giusto - una volta che il corpo è impostato sulla posizione: relativo; si sposta sul fondo del corpo ma non dovrebbe essere quella impostazione sul corpo essere di default in base alla dichiarazione di msdn (e molte altre fonti affermando lo stesso)? –

Credo che l'impostazione predefinita per tutti gli elementi sia 'position: static;' – rblarsen

sì a prescindere dal corpo come ho sempre creduto almeno - poi uno studente mio mi ha fatto questa domanda e non ho potuto dargli una risposta accettabile. –

-1

1). Sì, puoi dare una posizione assoluta al tag, ma devi mettere quel tag dentro un altro tag con posizione relativa.

2). O puoi farlo con la funzionalità after before.

fonte

2015-09-18 12:53:07

Ho provato alcuni modelli in vari browser e hai ragione!

L'oggetto non è posizionato rispetto al corpo a meno che non sia posizionato anche il corpo!

Se il corpo non è posizionato, l'oggetto viene posizionato rispetto al viewport.

fonte

2015-09-18 12:54:05

Posizione CSS assoluta - l'elemento posizionato successivo è il corpo?

risposta

Problemi correlati