CSS Positioning (Posizionamento)
a volte di posizionamento molto difficile!
Decidere di dimostrare di fronte agli elementi!
Gli elementi possono sovrapporsi!
Positioning (Posizionamento)
proprietà di posizionamento CSS permettono di individuare un elemento. Può anche essere un elemento in un altro elemento dietro, e specificare un contenuto di elemento è troppo grande, ciò che dovrebbe accadere.
Gli elementi possono essere utilizzati in alto, in basso, a sinistra e attributi posizionamento a destra. Tuttavia, queste proprietà non funzioneranno a meno che la proprietà position è impostata prima. Essi hanno anche modi di funzionamento, a seconda del metodo di posizionamento.
Ci sono quattro diversi metodi di posizionamento.
posizionamento statico
elementi HTML di default, che non si trova, gli elementi appaiono nel flusso normale.
elementi di posizionamento statici non sarà alto, in basso, a sinistra, a destra influenza.
posizionamento fisso
Posizione dell'elemento relativamente alla finestra browser è una posizione fissa.
Anche quando la finestra è a rotazione che non si muove:
Nota: il posizionamento fissoin IE7 e IE8 descrizione DOCTYPE devono supportare!
posizionamento fisso della posizione degli elementi del documento indipendenti di flusso, e quindi non occupa spazio.
elementi posizionati fissi e altri elementi si sovrappongono.
posizionamento relativo
Relativa elemento di posizionamento è posizionato rispetto alla sua posizione normale.
Esempi
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Prova »
Può essere spostato posizionamento relativo degli elementi di contenuto e di elementi sovrapposti, non cambia lo spazio occupato originale.
elementi posizionati Relativamente sono spesso utilizzati come un posizionamento assoluto degli elementi contenenti blocchi.
posizionamento assoluto
Posizione posizionamento assoluto degli elementi rispetto all'elemento genitore posizionato più vicino, se l'elemento non è già posizionato elemento genitore, la sua posizione rispetto al <html>:
Assolutamente posizionata in modo che la posizione degli elementi del documento indipendenti di flusso, e quindi non occupa spazio.
Assolutamente elementi e altri elementi che si sovrappongono posizionato.
elementi sovrapposti
Orientamento e indipendente degli elementi del documento di flusso, in modo che possano coprire gli altri elementi della pagina
attributo z-index specifica l'ordine di sovrapposizione di un elemento (quale elemento deve essere posizionato davanti o dietro)
Elemento può avere un ordine pila positivo o negativo:
Elemento ha un ordine superiore di sovrapposizione è sempre di fronte l'ordine di sovrapposizione inferiore elementi.
Nota: Se due elementi posizionati sovrappongono, non specificare la z - index, posizionamento finale degli elementi nel codice HTML verrà visualizzato sopra.
Altri esempi
In questo esempio mostra come impostare la forma dell'elemento. L'elemento è ritagliato in questa forma, e visualizzato.
Questo esempio dimostra la proprietà overflow per creare una barra di scorrimento, quando il contenuto di un elemento nella zona designata è troppo grande, come impostare per ospitare.
Come impostare il browser per gestire automaticamente trabocco
Questo esempio mostra come impostare il browser per gestire automaticamente troppo pieno.
Questo esempio dimostra come cambiare il cursore.
Tutte le proprietà di posizionamento CSS
colonna "CSS" indica la versione della definizione della proprietà numero che CSS (CSS1 o CSS2).
| proprietà | spiegazione | valore | CSS |
|---|---|---|---|
| fondo | Offset definisce il confine tra l'elemento di posizionamento minore al di fuori suo blocco contenitore dal confine sotto. | auto lunghezza % ereditare | 2 |
| clip | Clip di un elementi di posizionamento assoluto | forma auto ereditare | 2 |
| cursore | Spostare il cursore per visualizzare il tipo specificato | URL auto mirino difetto pointer mossa e-ridimensionamento ne-ridimensionamento NW-ridimensionamento n-ridimensionamento se-resize sw-ridimensionamento s-ridimensionamento w-resize testo aspettare aiutare | 2 |
| sinistra | Definisce gli elementi di targeting sinistra compensare margine di blocco di confine tra il bordo sinistro del suo contenitore. | auto lunghezza % ereditare | 2 |
| straripamento | Quando il contenuto dell'elemento impostato cosa accade quando traboccato sua regione. | auto nascosto pergamena visibile ereditare | 2 |
| trabocco-y | Specifica come gestire i contenuti della parte superiore / bordo inferiore dell'area di contenuto dell'elemento di overflow | auto nascosto pergamena visibile no-display no-contenuti | 2 |
| di overflow-x | Specifica come gestire a destra / bordo sinistro dell'area del contenuto del troppo pieno contenuto dell'elemento | auto nascosto pergamena visibile no-display no-contenuti | 2 |
| posizione | Specificare il tipo di elementi di posizionamento | assoluto fisso relativo statica ereditare | 2 |
| destra | Esso definisce gli elementi di targeting che compongono il suo confine e offset tra il bordo destro del blocco margine destro. | auto lunghezza % ereditare | 2 |
| top | Si definisce un elemento di posizionamento sul confine e il suo margine sul blocco contiene l'offset tra i confini. | auto lunghezza % ereditare | 2 |
| z-index | Impostando l'ordine degli elementi | numero auto ereditare | 2 |