La position proprietà specifica il tipo di metodo di posizionamento utilizzato per un elemento (statica, relativo, fisso o assoluto).
La posizione di proprietà
La position proprietà specifica il tipo di metodo di posizionamento utilizzato per un elemento.
Ci sono quattro diversi valori di posizione:
-
static -
relative -
fixed -
absolute
Gli elementi vengono poi posizionati utilizzando la proprietà in alto a destra, in basso, a sinistra, e. Tuttavia, queste proprietà non funzioneranno a meno che la position proprietà è impostata prima. Lavorano anche diverso a seconda del valore di posizione.
position: static;
elementi HTML sono posizionati statica per impostazione predefinita.
elementi posizionati statiche non sono influenzati dalla proprietà in alto a destra, in basso, a sinistra, e.
Un elemento con position: static; non è posizionato in modo speciale; è sempre posizionato secondo il normale flusso della pagina:
Ecco il CSS che viene utilizzato:
position: relative;
Un elemento con position: relative; è posizionato rispetto alla sua posizione normale.
Impostazione superiore, destro, inferiore e proprietà sinistra di un elemento relativamente in posizione la indurrà ad essere regolato dalla sua posizione normale. Altri contenuti non verrà regolata per adattarsi a qualsiasi spazio lasciato dall'elemento.
Ecco il CSS che viene utilizzato:
Esempio
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
} Prova tu stesso " position: fixed;
Un elemento con position: fixed; è posizionato rispetto al viewport, il che significa che rimane sempre nello stesso posto, anche se la pagina viene fatto scorrere. La parte superiore, a destra, in basso, e le proprietà di sinistra vengono utilizzati per posizionare l'elemento.
Un elemento fisso non lascia un vuoto nella pagina in cui normalmente sono stati localizzati.
Si noti l'elemento fisso nell'angolo in basso a destra della pagina. Ecco il CSS che viene utilizzato:
Esempio
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width:
300px;
border: 3px solid #73AD21;
} Prova tu stesso " position: absolute;
Un elemento con position: absolute; è posizionato rispetto al antenato più vicino posizionato (invece di relativa posizionato alla finestra, come fisso).
Però; se un elemento posizionato in assoluto non ha antenati posizionati, utilizza il corpo del documento, e si muove insieme a scorrimento della pagina.
Nota: Un "positioned" elemento è uno la cui posizione è nulla se non static .
Qui c'è un semplice esempio:
Ecco il CSS che viene utilizzato:
Esempio
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Prova tu stesso " sovrapposizione Elementi
Quando gli elementi sono posizionati, possono sovrapporsi ad altri elementi.
La z-index proprietà specifica l'ordine di sovrapposizione di un elemento (quale elemento deve essere posto davanti o dietro, gli altri).
Un elemento può avere un ordine pila positivo o negativo:
Questo è un titolo
Poiché l'immagine ha un z-index -1, sarà posizionato dietro il testo.
Un elemento con maggiore ordine stack è sempre di fronte di un elemento con un ordine pila inferiore.
 | Nota: Se due elementi posizionati sovrappongono senza un z-index specificato, l'elemento posizionato ultima nel codice HTML verrà mostrato in alto. |
|---|
Posizionamento di testo in un'immagine
Come posizionare il testo su un'immagine:
Esempio
Prova tu stesso:
In alto a sinistra » In alto a destra» In basso a sinistra » In basso a destra» Centrato »
Altri esempi
Impostare la forma di un elemento
Questo esempio mostra come impostare la forma di un elemento. L'elemento è ritagliato in questa forma, e visualizzato.
Come mostrare troppo pieno in un elemento con scorrimento
Questo esempio mostra come impostare la proprietà overflow per creare una barra di scorrimento quando il contenuto di un elemento è troppo grande per entrare in un'area specifica.
Come impostare il browser per gestire automaticamente trabocco
Questo esempio mostra come impostare il browser per gestire automaticamente troppo pieno.
Modificare il cursore
Questo esempio dimostra come cambiare il cursore.
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Tutte le proprietà CSS di posizionamento
| Proprietà | Descrizione |
|---|---|
| bottom | Imposta il bordo margine inferiore per una casella di posta |
| clip | Clip di un elemento posizionato in modo assoluto |
| cursor | Specifica il tipo di cursore da visualizzare |
| left | Imposta il bordo margine sinistro per una casella di posta |
| overflow | Specifica che cosa succede se il contenuto trabocca il vaso di un elemento |
| overflow-x | Specifica cosa fare con la Sinistra / bordi destro del contenuto se trabocca zona contenuto dell'elemento |
| overflow-y | Specifica cosa fare con i primi / bordi inferiori del contenuto se trabocca zona contenuto dell'elemento |
| position | Specifica il tipo di posizionamento per un elemento |
| right | Imposta il margine margine destro per una casella di posta |
| top | Imposta il bordo superiore margine di una scatola posizionata |
| z-index | Imposta l'ordine di sovrapposizione di un elemento |