Posizionamento Assoluto in CSS
L'utilizzo del posizionamento assoluto rimuove l'elemento dal normale flusso del documento, consentendo agli altri elementi adiacenti di occupare lo spazio lasciato libero. I valori di posizionamento top, left, bottom e right dell'elemento vengono calcolati rispetto al suo antenato più vicino con posizionamento non statico. Se non esiste un tale antenato, i valori vengono determinati in base ai bordi dell'elemento <body>.
position: absolute;
Generalmente, il posizionamento assoluto viene utilizzato in combinazione con il posizionamento relativo, poiché è necessario posizionare un elemento rispetto a un altro elemento nel flusso del documento.
Si consideri il seguente esempio. L'obiettivo è posizionare il nome della città (un elemento <span> con la classe description) nell'angolo in alto a destra della scheda città (un elemento <div> con la classe card). Prestare attenzione alla proprietà position per i diversi elementi.
index.html
index.css
In questo esempio, gli elementi .description sono posizionati in modo assoluto all'interno degli elementi .card, grazie all'applicazione di position: relative; su .card. Questo posizionamento colloca i nomi delle città nell'angolo in alto a destra di ogni card.
È possibile spostare l'elemento rispetto a un altro elemento. Come funziona? È necessario applicare position: relative; all'elemento che è l'antenato dell'elemento che si desidera posizionare in modo assoluto. In caso contrario, l'elemento verrà posizionato rispetto all'elemento <body>.
Nota
Quando si specificano le proprietà
top,left,rightebottomper un elemento posizionato in modo assoluto, il browser le calcola a partire dai bordi dell'elemento posizionato relativamente. Questo può essere visto come l'applicazione di un margine all'elemento figlio all'interno dell'elemento genitore.
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Can you explain the difference between absolute and relative positioning?
How do I use absolute positioning to place an element in a specific corner?
What happens if I don't set position: relative on the parent element?
Awesome!
Completion rate improved to 2.04Posizionamento Assoluto in CSS
Scorri per mostrare il menu
L'utilizzo del posizionamento assoluto rimuove l'elemento dal normale flusso del documento, consentendo agli altri elementi adiacenti di occupare lo spazio lasciato libero. I valori di posizionamento top, left, bottom e right dell'elemento vengono calcolati rispetto al suo antenato più vicino con posizionamento non statico. Se non esiste un tale antenato, i valori vengono determinati in base ai bordi dell'elemento <body>.
position: absolute;
Generalmente, il posizionamento assoluto viene utilizzato in combinazione con il posizionamento relativo, poiché è necessario posizionare un elemento rispetto a un altro elemento nel flusso del documento.
Si consideri il seguente esempio. L'obiettivo è posizionare il nome della città (un elemento <span> con la classe description) nell'angolo in alto a destra della scheda città (un elemento <div> con la classe card). Prestare attenzione alla proprietà position per i diversi elementi.
index.html
index.css
In questo esempio, gli elementi .description sono posizionati in modo assoluto all'interno degli elementi .card, grazie all'applicazione di position: relative; su .card. Questo posizionamento colloca i nomi delle città nell'angolo in alto a destra di ogni card.
È possibile spostare l'elemento rispetto a un altro elemento. Come funziona? È necessario applicare position: relative; all'elemento che è l'antenato dell'elemento che si desidera posizionare in modo assoluto. In caso contrario, l'elemento verrà posizionato rispetto all'elemento <body>.
Nota
Quando si specificano le proprietà
top,left,rightebottomper un elemento posizionato in modo assoluto, il browser le calcola a partire dai bordi dell'elemento posizionato relativamente. Questo può essere visto come l'applicazione di un margine all'elemento figlio all'interno dell'elemento genitore.
Grazie per i tuoi commenti!
