La posizione degli elementi HTML gioca un ruolo fondamentale nell'organizzazione dei componenti della pagina web. In particolare, la posizione degli elementi può essere regolata utilizzando il CSS “ posizione ' proprietà. Questa proprietà può essere associata alle proprietà di offset, come le proprietà superiore, sinistra, destra e inferiore, fornendo valori specifici per regolare l'elemento nella 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. I diversi valori della proprietà position sono fixed, absolute, relative, static e sticky. Questi valori vengono impostati con le proprietà di offset, come superiore, destra, sinistra e inferiore, per regolare la posizione dell'elemento.
Come applicare il posizionamento assoluto CSS?
Il posizionamento assoluto dell'elemento può essere applicato utilizzando il CSS ' posizione ” proprietà con il valore “ assoluto ”. L'elemento con la posizione assoluta viene regolato in corrispondenza dell'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: crea un file HTML
Nel file HTML, all'interno dell'elemento body, 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 dare uno stile agli elementi.
- “ Tutto quanto L'attributo ” specifica il testo che viene visualizzato al posto dell'immagine se l'immagine non viene caricata sulla pagina.
- “ Tutto quanto L'attributo ” specifica il testo che viene visualizzato sulla pagina al posto dell'immagine se l'immagine non viene caricata sulla pagina.
Quindi, aggiungi un altro div contenente l'intestazione e gli elementi h1 e p del paragrafo:
< div classe = 'principale' >< div classe = 'contenuto' >
< imm src = 'immagini/linuxlogo.png' classe = 'casa' Tutto quanto = 'logo linux' larghezza = '80px' >
< h1 > Il posizionamento assoluto CSS h1 >
< p > Salve squadra Linuxhint ! p >
div >
div >
In CSS, vengono utilizzate diverse proprietà di stile per decorare gli elementi HTML.
Passaggio 2: stile 'tutti' gli elementi
* {famiglia di caratteri: Verdana, Geneva, Tahoma, sans-serif;
}
Gli elementi HTML sono stilizzati utilizzando il carattere ' 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, verrà applicato l'altro.
Passaggio 3: div stile 'casa'.
.casa {posizione: assoluta;
in alto: 50px;
sinistra: 45px;
}
Di seguito sono riportate le proprietà applicate al “ casa div:
-
- “ posizione La proprietà ” imposta la posizione dell'elemento. Qui, l'aggiunta “ assoluto ” posizionerà l'elemento relativo 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' div
.contenuto {colore di sfondo: blu cadetto;
larghezza: 300px;
altezza: 250px;
padding-sinistra: 40px;
margine sinistro: 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.
- “ padding-sinistra ” è impostata per aggiungere spazio sul lato sinistro del contenuto dell'elemento.
- “ margine sinistro La proprietà ” specifica lo spazio sul lato sinistro dell'elemento.
A questo punto, la nostra pagina web sarà simile a questa:
Si può vedere dal risultato sopra che l'immagine del div home è posizionata a 50px dall'alto 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 'relativa' all'elemento genitore posizionato?
Questa sezione ti guiderà nella regolazione della posizione dell'elemento rispetto all'elemento genitore di posizione più vicino.
Imposta la proprietà “position” del div “content”.
posizione: relativa;
Per regolare la posizione dell'elemento rispetto all'elemento padre, imposta il parametro ' posizione ” proprietà dell'elemento genitore a “ parente ' valore.
Imposta la proprietà 'posizione' dell'elemento 'img'.
.casa {posizione: assoluta;
in alto: 100px;
sinistra: 220px;
}
Qui:
-
- “ posizione ” proprietà con il valore impostato come “ assoluto ” sarà posizionato in relazione all'elemento padre (ovvero, la posizione del contenuto div è impostata con il valore relative).
- “ superiore La proprietà ” viene utilizzata per impostare la posizione dell'elemento dall'alto.
- “ sinistra La proprietà ” viene utilizzata per impostare la posizione dell'elemento da sinistra.
Produzione
Si può vedere dal risultato che l'immagine è stata posizionata rispetto al suo div padre e sembra adatta.
Conclusione
Il CSS” posizione La proprietà ” viene utilizzata per impostare la posizione degli elementi HTML. Questa proprietà può essere valutata come fixed, relative, absolute, sticky e static. Il ' assoluto ” posizionerà l'elemento corrispondente al suo elemento genitore posizionato nelle vicinanze. Questo post ha spiegato il posizionamento assoluto CSS con un esempio pratico.