Differenza tra la posizione CSS relativa e assoluto

In CSS, il “posizione"La proprietà viene utilizzata per impostare la posizione dell'elemento in cui gli elementi HTML devono essere visualizzati nella pagina Web. Questa proprietà è legata alle proprietà sinistro, destro, superiore e inferiore per impostare la posizione finale dell'elemento HTML.

Questo blog discuterà:

• Cosa sono CSS “posizione"Tipi?
• Come usare CSS "Posizione: relativo" Proprietà?
• Come usare CSS "Posizione: assoluto" Proprietà?

Quali sono i tipi di "posizione" CSS?

Esistono cinque tipi di posizioni CSS:

• "statico": Gli elementi posizionati staticamente non sono influenzati dalle proprietà offset in basso, a sinistra, a destra e in alto. È il valore predefinito di un elemento HTML.
• "fisso": L'elemento posizionato fisso rimane nello stesso posto in cui è impostato anche sullo scroll dello schermo.
• "appiccicoso": Un elemento posizionato appiccicoso rimarrà statico quando l'utente scorre lo schermo.
• "assoluto": Un elemento assoluto è posizionato o posizionato rispetto all'elemento HTML antenato più vicino o più vicino.
• "parente": L'elemento relativo è posizionato rispetto alla sua posizione normale.

Ora, prima di discutere la differenza tra l'elemento relativo e assoluto posizionato, creeremo una pagina web per la dimostrazione.

Prerequisito

In HTML, in primo luogo, aggiungi un elemento div con il nome dell'attributo di classe "Div-Parent". All'interno di questo, includi altri quattro tag con il nome di classe "Div-1". Si noti che solo il secondo avrà due classi, "Div-1" E "posizionamento".

Html

Applichiamo lo stile CSS agli elementi menzionati nel blocco di codice HTML sopra.

Stile "Div-Parent" Div

.Div-parent
margine-top: 100px;
Posizione: relativo;

L'elemento div con nome di classe "Div-Parent"È disegnato con le proprietà CSS spiegate di seguito:

• "margine-top"La proprietà viene utilizzata per impostare lo spazio nella parte superiore dell'elemento Div.
• "posizioneLa proprietà "è impostata come"parente", Che posiziona o posiziona l'elemento selezionato rispetto alla sua posizione normale.

Stile "Div-1" Div

.Div-1
Background-color: Blueviolet;
larghezza: 200px;
Altezza: 200px;
Bordo: 5px Dasched #000000;
display: blocco inline;

Ecco la spiegazione delle proprietà applicate:

• "colore di sfondo"La proprietà imposta il colore di sfondo dell'elemento Div.
• "larghezza"La proprietà definisce la larghezza dell'elemento HTML aggiunto.
• "altezza"Il valore della proprietà rappresenta l'altezza dell'elemento HTML.
• "confine"La proprietà applica il bordo attorno a un elemento. È specificato usando i valori per la larghezza, lo stile e il colore.
• "Schermo"Con il valore"blocco inline"La proprietà consente l'applicazione della larghezza e dell'altezza all'elemento.

Come usare "Posizione: relativo" in CSS?

Quando imposti il ​​“posizione"Il valore della proprietà come"parente", Si muove rispetto alla sua posizione normale. La sua posizione dipende anche dai valori come proprietà laterali. Tuttavia, altri elementi non verranno ridimensionati per colmare il divario lasciato dall'elemento.

Stile "Posizionamento" Div

.posizionamento
Background-color: cioccolato;
Posizione: relativo;
Top: 20px;
A sinistra: 20px;

Qui:

• "posizione"Il valore della proprietà è impostato come"parente", Che posiziona l'elemento rispetto alla sua posizione normale. Viene quindi abbinato alle proprietà superiore, destra, sinistra e inferiore per impostare la posizione finale.
• "superiore"Proprietà con il valore"20px"Imposta uno spazio di 20px sopra un elemento.
• "Sinistra"Proprietà con il valore"20px"Fornisce uno spazio di 20 px sul lato sinistro di un elemento.

Il risultato seguente mostra chiaramente la posizione della seconda scatola viene spostata dall'alto e dalla sinistra:

Come usare "posizione: assoluto" in CSS?

IL "posizione"Proprietà con il valore"assoluto"Cambia la posizione dell'elemento rispetto al suo genitore posizionato. Se la posizione dell'elemento genitore non è impostato relativo, il div si sposterà relativo al corpo della pagina web. Inoltre, altri elementi riempiranno lo spazio lasciato dall'elemento.

Cambiamo il "posizione"Proprietà del div con la classe chiamata"posizionamento"Da relativo all'assoluto e vedere la differenza:

Posizione: assoluto;

La seconda scatola è impostata su 20px spazio dalla parte superiore e 20px da sinistra rispetto al suo elemento genitore:

Questo riguardava la posizione relativa e assoluta in CSS.

Conclusione

In CSS, per definire la posizione finale dell'elemento, la proprietà di posizione viene utilizzata. Più specificamente, il "parente"La posizione posiziona la posizione dell'elemento rispetto alla sua posizione normale, mentre il"assoluto"La posizione posiziona l'elemento rispetto al suo elemento HTML genitore posizionato. Questo blog ha discusso della differenza tra le posizioni CSS relative e assolute.