La posizione degli elementi HTML svolge un ruolo vitale nell'organizzazione dei componenti della pagina web. Più specificamente, la posizione degli elementi può essere regolata utilizzando il CSS "posizione" proprietà. Questa proprietà può essere associata a proprietà offset, come proprietà superiore, sinistra, destra e inferiore, fornendo valori specifici per regolare l'elemento sulla pagina. Comunque, il "assoluto"Gli elementi posizionati possono essere regolati rispetto all'elemento posizionato più vicino.

Questo post spiegherà il posizionamento assoluto CSS.

Proprietà "posizione" CSS

IL "posizione"La proprietà in CSS può essere utilizzata per regolare la posizione dell'elemento. Valori diversi della proprietà di posizione sono fissi, assoluti, relativi, statici e appiccicosi. Questi valori sono impostati con le proprietà offset, come in alto, a destra, a sinistra e in basso, per regolare la posizione dell'elemento.

Come applicare il posizionamento assoluto CSS?

Il posizionamento assoluto dell'elemento può essere applicato usando il CSS "posizione"Proprietà con il valore"assoluto". L'elemento con la posizione assoluta viene regolato corrispondente al suo elemento genitore posizionato più vicino. Ma se l'antenato non è posizionato, si adatterà rispetto alla sezione del corpo del documento.

Esempio

Comprendiamo il concetto con un esempio pratico.

Passaggio 1: creare un file HTML

Nel file HTML, all'interno dell'elemento corporeo, aggiungi un div con il nome della classe "principale". Quindi, all'interno del Div creato, aggiungi un tag HTML associato ai seguenti attributi:

• • "src"Fornisce un collegamento all'immagine.
  • "classe"È usato nel CSS per modellare gli elementi.
  • "Al"L'attributo specifica il testo che mostra al posto dell'immagine se l'immagine non riesce a caricare sulla pagina.
  • "Al"L'attributo specifica il testo che mostra nella pagina al posto dell'immagine se l'immagine non riesce a caricare nella pagina.

Quindi, aggiungi un altro div contenente gli elementi H1 e P del paragrafo:

Il posizionamento assoluto CSS

Ciao team Linuxhint!

In CSS, vengono utilizzate diverse proprietà di styling per decorare gli elementi HTML.

Passaggio 2: elementi "tutti" di stile

*
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

Gli elementi HTML sono disegnati usando il “famiglia di font"Proprietà con il valore"Verdana, Ginevra, Tahoma, Sans-Serif". Questo elenco di valori garantisce che se il browser non supporta il primo stile, l'altro verrà applicato.

Passaggio 3: stile "Home" Div

.casa
Posizione: assoluto;
Top: 50px;
A sinistra: 45px;

Di seguito sono riportate le proprietà applicate al "casa"Div:

• • "posizione"La proprietà imposta la posizione dell'elemento. Qui, il aggiunto "assoluto"Posizionerà l'elemento rispetto alla sezione del corpo dell'HTML.
  • "superiore"La proprietà viene utilizzata per la regolazione verticale dell'elemento.
  • "Sinistra"La proprietà viene utilizzata per la regolazione orizzontale dell'elemento.

Passaggio 4: stile "contenuto" di stile

.contenuto
Background-color: CadetBlue;
larghezza: 300px;
Altezza: 250px;
imbottitura-sinistra: 40px;
Margin-Left: 80px;

Di seguito sono riportate le proprietà CSS che vengono applicate al "contenuto"Div:

• • "colore di sfondo"La proprietà imposta il colore di sfondo dell'elemento.
  • "larghezza"La proprietà imposta la larghezza dell'elemento.
  • "altezza"La proprietà imposta l'altezza dell'elemento.
  • "imbottitura-sinistra"La proprietà è impostata per aggiungere spazio al lato sinistro del contenuto dell'elemento.
  • "margine-sinistra"La proprietà specifica lo spazio sul lato sinistro dell'elemento.

A questo punto, la nostra pagina web sarà così:

Si può vedere dal risultato sopra che l'immagine della casa Div è posizionata a 50px dalla parte superiore e 45px da sinistra del corpo del documento. Inoltre, la posizione del Div Home è impostata rispetto alla sezione del corpo dell'HTML.

Come regolare la posizione dell'elemento "relativo" all'elemento genitore posizionato?

Questa sezione ti guiderà sulla regolazione della posizione dell'elemento rispetto all'elemento genitore di posizione più vicino.

Imposta proprietà "posizione" di div "contenuto"

Posizione: relativo;

Per regolare la posizione dell'elemento rispetto all'elemento genitore, impostare "posizione"Proprietà dell'elemento genitore a"parente" valore.

Imposta la proprietà "posizione" dell'elemento "IMG"

.casa
Posizione: assoluto;
Top: 100px;
A sinistra: 220px;

Qui:

• • "posizione"Proprietà con il valore impostato come"assoluto"Verrà posizionato rispetto all'elemento genitore (ovvero la posizione di Div Content è impostata con il relativo valore).
  • "superiore"La proprietà viene utilizzata per l'impostazione della posizione dell'elemento dalla parte superiore.
  • "Sinistra"La proprietà viene utilizzata per l'impostazione della posizione dell'elemento da sinistra.

Produzione

Si può vedere dal risultato che l'immagine è stata posizionata rispetto al suo divie genitore e sembra adatto.

Conclusione

Il CSS "posizione"La proprietà viene utilizzata per impostare la posizione degli elementi HTML. Questa proprietà può essere valutata come fissa, relativa, assoluta, appiccicosa e statica. IL "assoluto"Il valore posizionerà l'elemento corrispondente al suo elemento genitore posizionato vicino. Questo post ha spiegato il posizionamento assoluto CSS con un esempio pratico.