Yahoo! User Interface Blog (YUIBlog)

La proprietà CSS Position

Questa proprietà si applica a tutti gli elementi. Ha cinque possibili valori:

• static
• relative
• absolute
• fixed
• inherit

position: static

Dalla sezione 9 modello di formattazione visuale :

Il box è una scatola normale, di cui secondo il normale flusso . I top , right , bottom e left le proprietà non si applicano.

Cose da notare in questa demo

• La seconda casella mostra esattamente dove sarebbe senza la dichiarazione di posizione.
• Il valore dato al top non si applica perché in un contesto 'statico', il valore calcolato di compensazioni box è sempre auto .

Cose da ricordare

• Se la position proprietà di un elemento ha il valore di static , che non è detto elemento ad essere posizionato.
• Poiché static è il valore iniziale (il valore di default), non vi è alcuna necessità di includere tale stile in un blocco di dichiarazione meno che non sia a sovrascrivere un valore diverso.

position: relative

Dalla sezione 9 modello di formattazione visuale :

La posizione della scatola è calcolata secondo il normale flusso (questo è chiamato la posizione in flusso normale ). Poi la scatola è spostato rispetto alla sua posizione normale. Quando una scatola B è posizionato relativamente, la posizione della scatola seguente viene calcolata come se B non è stata compensata.

Cose da notare in questa demo

• Box 'two' è scesa da 300 pixel, ma casella 'tre', nonché i paragrafi seguenti rimase al suo posto. Sembra come se la casella è stato revocato dalla pagina, lasciando la sua impronta alle spalle. Questo perché una finestra di compensazione posizionato relativamente non disturba il flusso.
• Le sovrapposizioni box posizionati in modo relativo i seguenti elementi. Essa mostra davanti altre caselle.

Cose da ricordare

• Valori calcolati sono sempre a sinistra =-destra e dall'alto in = basso. Se la direction del blocco contenitore è ltr , il valore di 'left' vittorie e 'destra' diventa - 'left'. Se direction del blocco contenitore è rtl , 'right' vittorie e 'di sinistra' viene ignorato. Gli autori potrebbero approfittare di come funzionano le cose impostando il valore pari a proprietà opposte.
• A differenza con il modello di 'assoluto', top , right , bottom , e la left proprietà non può allungare, né ridurre le dimensioni del box (che non può cambiare la sua dimensione).

position: absolute

Dalla sezione 9 modello di formattazione visuale :

La posizione del riquadrato (e possibilmente la misura) è specificata con l' top , right , bottom , e la left proprietà. Queste proprietà specificano gli spostamenti rispetto alla scatola del blocco contenitore . Una finestra di posizionamento assoluto viene rimosso dal flusso normale interamente (non ha alcun impatto sui successivi fratelli) e assegnata una posizione rispetto ad un blocco contenitore. Inoltre, anche se posizionati in modo assoluto scatole hanno margini, non crollare con ogni altro margine.

Cose da notare in questa demo

• Poiché nessuna finestra di offset viene specificato, box 'two' non si mosse dalla sua posizione originale, ma se avessimo usato top:0;left:0; per esempio, che la casella sarebbe in alto a sinistra della finestra .
• Layout di saggio, è come box 'due' era stata disegnata con display:none . La scatola è stato rimosso dal flusso.
• Con scatola out 'due' del flusso, cassetta di 'tre' si è spostato contro casella 'uno' (i paragrafi hanno seguito).
• Come tutti gli elementi rimossi dal flusso, cassetta di 'due' è orizzontale termoretraibile.

Cose da ricordare

• Per ogni elemento 'assoluto' o 'fixed' posizionato il valore calcolato per la display è block .
• Per ogni elemento 'assoluto' o 'fixed' posizionato il valore calcolato per float è none .
• A 'blocco contenente' è una casella che stabilisce un contesto di posizionamento. Si è stabilito dal più vicino antenato con una 'posizione' di 'assoluto', 'parente' o 'fixed'. Ciò significa che il riquadrato genitore non può essere il blocco contenitore .
• La posizione predefinita di un box posizionato in modo assoluto, non è sempre lo stesso come se fosse stata disegnata con top: 0; left: 0; (in un contesto LTR). E questo è per due motivi:
  1. Il blocco contenitore per un riquadrato posizionato è stabilito dal più vicino antenato posizionato, se non c'è nessuno, il contenitore di riferimento è l'elemento principale. Il blocco contenente, in cui l'elemento radice la vita è un rettangolo chiamato il blocco contenitore iniziale. Per il supporto continuo, ha le dimensioni della finestra (una finestra o altra area di visualizzazione sullo schermo) ed è ancorato all'origine tela. Questo esempio mostra la finestra posizionata in relazione alla finestra (il blocco di default che contiene).
  2. L'elemento è posizionato in riferimento alla casella imbottitura, non la scatola contenuto né la scatola bordo del blocco contenitore. Questo nuovo esempio mostra dove casella 'due' sarebbe se i bordi della casella di padding non toccare i bordi della finestra contenuto (il blocco che contiene sia body ).
• La dimensione della scatola può essere il risultato della top , right , bottom , e left valori delle proprietà. Per esempi, azzerando tutte le proprietà renderà il tratto casella per corrispondere alle dimensioni della scatola imbottitura del suo blocco contenitore. Vedi azzerando tutti gli offset box (nota: IE6 non allungare il box).
• Per creare una sovrapposizione di maschera che non scorre con il documento (come nel precedente esempio ), utilizzare fixed al posto di absolute o stile body , con position:relative come il blocco di posizionamento iniziale è la viewport (styling html non avrebbe funzionato in IE) . Dato che questo demo overlay mostra.
• position:absolute trigger hasLayout .

La cosa più importante da ricordare

Perché questo schema di posizionamento rimuove box dal flusso, si è ritenuto pratice male usarlo per il layout.

position: fixed

Dalla sezione 9 modello di formattazione visuale :

Posizionamento fisso è una sottocategoria del posizionamento assoluto. L'unica differenza è che per un box posizionato in modo fisso, il blocco contenitore è stabilito dalla finestra . Per i media continui , i riquadrati fissi non si muovono quando il documento viene fatto scorrere. In questo senso, sono simili a immagini di sfondo fisse . Per i media a pagine (dove il contenuto del documento è diviso in una o più pagine discreti), scatole con posizioni fisse sono ripetuti in ogni pagina. Questo è utile per l'immissione, ad esempio, una firma al fondo di ciascuna pagina. Scatole con posizione fissa che sono più grandi rispetto all'area della pagina vengono tagliati. Parti della casella di posizione fissa che non sono visibili nel blocco contenitore iniziale non viene stampato.

Cose da notare in questa demo :

• Dal momento che il posizionamento fisso è una sottocategoria del posizionamento assoluto, tutto ciò che era vero per 'assoluta' è anche vero per 'fixed' (l'elemento shrink-wrap, viene rimosso dal flusso, ecc.)
• La scatola è posizionato in relazione alla finestra, esso non scorre con la pagina.
• In IE 6, la finestra appare come una scatola statica , ma c'è un "funny" workaround per questo.
• Quando si stampa il documento, box 'two' appare su ogni singola pagina.

Cose da ricordare:

• La posizione della scatola è calcolata secondo il modello 'assoluto', ma in aggiunta, la scatola è fissato rispetto a qualche riferimento. In caso di palmare, proiezione, schermo, tty, tv e tipi di supporti, il riquadrato è fisso rispetto alla finestra e non si muove quando viene scrollato.
• I contenuti possono essere inaccessile per gli utenti vedenti se una parte della scatola è al di fuori dell'area di viewport.
• Nel caso del tipo di supporto di stampa, gli autori possono vuole evitare che un elemento di apparire su ogni pagina stampata. Magari usando una regola @ media, come in:

    @ Media print { 
     # Logo {position: static;}
   } 

• Come position:absolute , position:fixed attiverà hasLayout in IE.

posizione: ereditare

Se position:inherit è specificata per un box dato, quindi ci vorrà lo stesso valore calcolato della proprietà per i genitori della scatola.

Si noti che IE 6 e 7 non supportano questa parola chiave, tranne quando viene utilizzato con direction e visibility (si veda il valore della proprietà CSS ereditare ).

Le cose da considerare

Box offset

Essere consapevoli del fatto che, per assoluta e fissi riquadrati posizionati, valori impostati in percentuale top , right , bottom , e la left sono calcolati in base alle dimensioni del blocco che contiene (che non può essere del riquadrato genitore).

'Position' e 'overflow'

Una scatola in stile con overflow:hidden , ritaglierà relativamente elementi posizionati (scatole cinesi), ma non sempre nascondere quelli posizionati in modo assoluto. Questo perché la finestra di genitore non è sempre il blocco contenitore (il più vicino antenato con una 'posizione' di 'assoluto', 'parente' o 'fixed').

In breve, questo significa che gli elementi posizionati in modo assoluto mostrerà al di fuori di una scatola in stile con overflow: hidden meno che il loro blocco contenitore è la stessa scatola o un elemento all'interno della scatola detto. Questa pagina demo mostra come funzionano le cose.

Margini

Gli autori possono utilizzare margini sugli elementi indipendentemente dal loro schema di posizionamento.

Il caso di IE

In IE, 'posizionamento' una scatola può essere una benedizione o una maledizione:

• In IE6, position:relative (with haslayout) può essere utilizzato per prevenire una scatola in stile con margini negativi da essere ritagliato da un contenitore principale (vedere come il posizionamento del box risolve questo problema).
• Posizionamento di un elemento può "disturbare" lo stack come scatole in IE 6 e 7, questo potrebbe stabilire un nuovo contesto di impilamento (vedere un caso di test ).

L'ordine di sovrapposizione e stacking livello

• Secondo la sequenza nel codice sorgente, le scatole vengono posizionati di fronte a carri e scatole nel flusso normale.
• Gli autori possono specificare i livelli di stack tramite la proprietà 'z-index' solo su riquadrati posizionati.
• In IE6 e 7, il semplice fatto di posizionamento di un box in grado di stabilire un contesto di stratificazione (vedi sopra, " il caso di IE ").

I dispositivi mobili

Leggi l'articolo di PPK, il [sesto] valore di posizione , per scoprire perché i produttori di browser mobili non si può davvero sostenere position:fixed .

Ulteriori letture

• Il modello di formattazione visuale
• Posizione (proprietà CSS)
• La posizione dichiarazione

Un'analogia "fantasma" di DrLangbhani:

Un elemento di posizione relativa è sempre disassata rispetto alla sua posizione normale nel flusso. In altre parole, esso viene spostato rispetto a dove sarebbe in circostanze normali, e spostando non influenza la disposizione degli elementi intorno ad esso. E 'come un fantasma che ha lasciato il suo corpo dietro. Un corpo che ha la larghezza e l'altezza e colpisce i suoi dintorni, ma è invisibile. La scatola spettrale è in grado di muoversi, ma è ancora collegato al corpo vecchia che la sua posizione è ancora misurata da esso. Ora, un elemento con posizione assoluta è ancora più facile. Esso non influenza più suoi dintorni affatto (è tirato fuori dal flusso layout). E 'ormai un fantasma vero senza corpo lasciato alle spalle. Per quanto riguarda i suoi elementi di pari livello sono interessati è come se non esiste più. Per ottenere la sua posizione, guardare attraverso ciascuno dei suoi elementi principali fino a trovare uno con entrambe le posizioni: relative, [position: fixed,] o position: absolute. Tale elemento servirà come punto di riferimento. Solo se non si trova un elemento "posizionato" verrà compensata dal documento.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!