Usando la posizione in CSS

CSS fornisce proprietà diverse per modellare le pagine Web create in HTML. Usando queste proprietà, è possibile progettare elementi diversi. Una di queste proprietà più fantastiche è la "posizione" proprietà. CSS "posizione"La proprietà è una delle proprietà più comuni ed essenziali utilizzate per regolare la posizione degli elementi HTML.

Questo manuale ti guiderà sulla proprietà della posizione CSS. Quindi, iniziamo.

Qual è la proprietà "posizione" CSS?

In CSS, il “posizione"Viene utilizzato per specificare dove verrà visualizzato un elemento nella pagina in base alla sua posizione. Combinandolo con le proprietà CSS superiore, destra, in basso e sinistra determina dove verrà posizionato l'elemento.

Sintassi

La sintassi della proprietà di posizione CSS è riportata di seguito:

Posizione: valori

Al posto di "valore", Puoi impostare la posizione degli elementi come"statico","parente","assoluto", E "fisso".

Diamo un'occhiata più da vicino a ogni valore con esempi per capire come influenzano la posizione degli elementi della pagina.

Esempio

In HTML, aggiungeremo due contenitori all'interno del tag del corpo e assegneremo il nome della classe al primo div come "Div1"E il secondo div come"Div2":

Div 1
Div 2

Dopodiché, modelleremo il corpo della pagina web usando "corpo"In CSS e imposta il colore di sfondo del corpo come"RGB (127, 255, 212)":

corpo
Background-color: RGB (127, 255, 212);

Si può vedere che il colore di sfondo è applicato sulla pagina web:

Nel nostro file CSS, usa "div"Per applicare le stesse proprietà ai contenitori contemporaneamente. Regola la larghezza e l'altezza del div come "100px"E il margine come"30px". Per impostare la forma dei div, usa il "raggio di confine"Proprietà e impostare il suo valore come"30px". Successivamente, regola il testo del div usando il "allineamento"Proprietà per impostare il testo Div su"centro”Posizione e il"altezza della linea"Proprietà come"100px":

div
larghezza: 100px;
Altezza: 100px;
Margine: 30px;
raggio di confine: 10px;
Testo-align: centro;
linea di linea: 100px;

Dopodiché, imposta il colore del div per differenziarli. Per farlo, usa ".Div1"Per accedere al primo div e impostare il suo colore di sfondo come"RGB (236, 226, 128)":

.Div1
Background-color: RGB (236, 226, 128);

Ora, utilizza ".Div2"Per accedere al secondo div e impostare il suo colore di sfondo come"RGB (187, 166, 214)":

.Div2
Background-color: RGB (187, 166, 214);

Il risultato del codice di cui sopra è riportato di seguito:

Qual è la posizione "statica" in CSS?

"statico"Viene utilizzato per impostare la posizione rispetto al normale flusso di pagina. È impostato per impostazione predefinita. Inoltre, le proprietà in alto, in basso, a sinistra e a destra non hanno alcun effetto su di esso.

Esempio

Qui, imposteremo la posizione di entrambi di Div come statica. Si noti che tutte le altre proprietà di entrambi i contenitori rimarranno le stesse:

.Div1
..
Posizione: statico;

.Div2
..
Posizione: statico;

Puoi vedere che i Div sono posizionati nella loro posizione originale:

Qual è la posizione "relativa" in CSS?

Per impostare la posizione dell'elemento rispetto alla sua posizione normale, il "parente"Viene utilizzato il valore della proprietà di posizione.

Esempio

Imposteremo la posizione di "Div1" COME "parente" E "Div2" COME "assoluto". Qui, il secondo div è posizionato secondo il Div1:

.Div1
..
Posizione: relativo;

.Div2
..
Posizione: assoluto;

Ecco il risultato che dimostra che Div2 è regolato in base alla posizione di Div 1:

Ciò che è "fissa" in CSS?

Gli elementi HTML possono essere fissati sul browser usando "fisso"Valore della proprietà di posizione. La posizione degli elementi fissi è determinata dal Viewport, l'area del documento che è visibile al momento. Usando la finestra del browser come riferimento, questo elemento fisso è posizionato in relazione ad esso.

Esempio

Imposteremo la posizione di "Div1" COME "fisso" E "Div2" COME "statico". Qui useremo il valore statico per impostare la posizione di "Div2"Secondo il normale flusso di pagina:

.Div1
..
Posizione: fissa;

.Div2
..
Posizione: statico;

Qui, puoi vedere che la posizione di "Div1"È fisso e"Div2"È impostato in base al flusso di pagina:

Qual è la posizione "assoluta" in CSS?

In "assoluto"Posizionamento, l'elemento è posizionato rispetto al primo elemento genitore, che non è statico. Inoltre, un elemento può essere posizionato ovunque in una pagina usando il posizionamento assoluto.

Esempio

Imposteremo la posizione di "Div1" COME "parente" E "Div2" COME "assoluto". Dopodiché, useremo il "metter il fondo a"Proprietà come"5px"Per impostare il Div2 in fondo alla pagina:

.Div1
..
Posizione: relativo;

.Div2
..
Posizione: assoluto;
In basso: 5px;

La seguente immagine mostra che il Div2 è posizionato nella parte inferiore della pagina:

Questo è tutto! Abbiamo spiegato in dettaglio la descrizione della proprietà di posizione.

Conclusione

Per impostare la posizione dell'elemento HTML, il “posizione"La proprietà di CSS viene utilizzata. La proprietà di posizione supporta quattro valori diversi come statico, relativo, fisso e assoluto. In questo articolo, abbiamo spiegato in dettaglio la proprietà di posizione e fornito esempi per tutti i suoi valori.