Posizionamento assoluto CSS
- Pagina precedente Posizionamento relativo CSS
- Pagina successiva Flottamento CSS
L'area dell'elemento posizionato assolutamente viene completamente rimossa dal flusso del documento e posizionata rispetto al blocco contenitore, che può essere un altro elemento nel documento o il blocco contenitore iniziale. Lo spazio occupato dall'elemento nel flusso normale viene chiuso, come se l'elemento non esistesse. La posizionamento dell'elemento genera una casella di blocco, indipendentemente dal tipo di casella che avrebbe generato nel flusso normale.
Posizionamento assoluto CSS
La posizionamento assoluta rende la posizione dell'elemento indipendente dal flusso del documento, quindi non occupa spazio. Questo è diverso dalla posizionamento relativa, che viene considerata effettivamente parte del modello di posizionamento del flusso normale, perché la posizione dell'elemento è rispetto alla sua posizione nel flusso normale.
La disposizione degli altri elementi nel flusso normale sembra non esistere:
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
Come mostrato di seguito:
La posizione degli elementi con posizionamento assoluto è rispetto aL'antenato posizionato più vicinoSe l'elemento non ha un antenato posizionato, la sua posizione è rispetto aIl blocco iniziale.
Il problema principale della posizionamento è ricordare il significato di ogni tipo di posizionamento. Quindi, ora diamo un'occhiata ai concetti che abbiamo appreso: il posizionamento relativo è “rispetto” alla posizione iniziale dell'elemento nel documento, mentre il posizionamento assoluto è “rispetto” al più vicino antenato posizionato, se non esiste un antenato posizionato, allora “rispetto” al blocco iniziale.
Nota:A seconda del tipo di agente utente, il blocco iniziale potrebbe essere il canvas o l'elemento HTML.
Suggerimento:Poiché i riquadri di posizionamento assoluto non sono associati al flusso del documento, possono coprire altri elementi sulla pagina. Puoi impostare Proprietà z-indexPer controllare l'ordine di impilamento di questi riquadri.
Esempio di posizionamento assoluto CSS
- Posizionamento: posizionamento assoluto
- Questo esempio dimostra come posizionare gli elementi utilizzando valori assoluti.
- Pagina precedente Posizionamento relativo CSS
- Pagina successiva Flottamento CSS
