Proprietà di posizione CSS | Spiegato

I fogli di stile a cascata (CSS) sono costituiti da una vasta gamma di proprietà che vengono utilizzate per modellare elementi HTML, ad esempio, la proprietà del colore viene utilizzata per fornire testo che appare sulle pagine web un po 'di colore, la proprietà di visualizzazione definisce il comportamento degli elementi HTML definisce le specifiche di confine di un elemento e l'elenco continua. Questo articolo, tuttavia, è progettato per far luce sulla proprietà di CSS. Questa guida copre quanto segue.

1. Proprietà di posizione
2. Come assegnare il posizionamento relativo a un elemento HTML
3. Come assegnare il posizionamento assoluto a un elemento HTML
4. Come dare una posizione fissa a un elemento HTML

Proprietà di posizione

La proprietà di posizione di CSS specifica la posizione di un elemento HTML in una pagina Web. Ha la sintassi di seguito.

Posizione: valore;

Ecco un esempio per dimostrare ulteriormente la proprietà.

Come assegnare il posizionamento relativo a un elemento HTML

Questo esempio dimostra il valore relativo della proprietà di posizione che pone un elemento rispetto alla sua posizione originale.

In questo esempio, stiamo posizionando un'immagine in una determinata posizione usando il valore relativo della proprietà di posizione.

Html

CSS

.Immagine
Posizione: relativo;
A sinistra: 80%;
Top: 0%;
Altezza: 100px;
larghezza: 200px;

Produzione

Qui l'immagine viene posizionata dell'80% da sinistra della pagina rispetto alla sua posizione originale.

La posizione predefinita dell'immagine è la seguente.

Ci sono alcuni valori che possono essere assegnati alla proprietà di posizione di CSS, che sono i seguenti.

Valore	Descrizione
statico	Questo è il valore predefinito che colloca elementi in base alla loro posizione definita nel documento.
parente	Posiziona un elemento rispetto alla sua posizione originale.
assoluto	Posiziona un elemento con riferimento alla posizione dell'antenato dell'elemento.
fisso	Posiziona un elemento rispetto alla finestra del browser.
appiccicoso	Posiziona un elemento con riferimento alla posizione di scorrimento dell'utente.
iniziale	Posiziona un elemento al suo valore predefinito.
ereditare	Posiziona un elemento rispetto alle proprietà ereditate dal suo elemento genitore.

Alcuni altri esempi

Per la tua migliore comprensione abbiamo illustrato la proprietà di posizione con l'aiuto di altri esempi.

Come assegnare il posizionamento assoluto a un elemento HTML

Questo esempio dimostra il valore assoluto della proprietà di posizione.

Html

Genitore div
Bambino div

Qui vengono creati due esempi elementi che uno è considerato come Parent Div e l'altro come Child Div.

CSS

Il Parent Div è stato assegnato la posizione relativa e al bambino Div è stata assegnata la posizione assoluta. Come sappiamo che il valore assoluto posiziona un elemento rispetto alla posizione del suo genitore pertanto affinché il figlio div abbia una posizione assoluta rispetto al genitore Div abbiamo assegnato al genitore div la posizione relativa.

Produzione

Il bambino di div è stato posto in una posizione assoluta rispetto al genitore div.

Come dare una posizione fissa a un elemento HTML

Questo esempio dimostra il valore fisso della proprietà.

Html

Giallo Div

Red Div

Green Div

Abbiamo creato tre elementi uno con il nome giallo div, secondo con il nome rosso div e il terzo div con il nome verde div.

CSS

.giallo
Background-color:#ffe162;
larghezza: 400px;
Altezza: 500px;

.rosso
Background-color:#FF6464;
larghezza: 300px;
Altezza: 350px;

.verde
Background-color:#91C483;
larghezza: 200px;
Altezza: 100px;
Posizione: fissa;
A sinistra: 70%;
Top: 50%;

P
imbottitura: 20px 0;
Testo-align: centro;
Font-Family: 'Segoe Ui', Tahoma, Ginevra, Verdana, Sans-Serif

Nell'esempio sopra, solo al Green Div viene assegnata la posizione fissa, quindi, quando si scorre la pagina Web il div Green rimane fissa nella sua posizione rispetto alla finestra del browser.

Produzione

Il Green Div è stato assegnato correttamente il posizionamento fisso.

Conclusione

La proprietà di posizione di CSS specifica la posizione di un elemento HTML su una pagina Web, inoltre, i valori che questo possono mostrare sono; statico che è il valore predefinito, il valore assoluto posiziona un elemento rispetto al suo elemento genitore, il valore fisso posiziona un elemento rispetto alla finestra del browser, il valore relativo posiziona un elemento rispetto alla sua posizione originale e il valore appiccicoso posiziona un elemento con Rispetto alla posizione di scorrimento dell'utente. La proprietà di posizione e i suoi vari valori sono illustrati in questo articolo con l'aiuto di esempi.