Top CSS

La parte superiore è descritta come il punto superiore. In CSS abbiamo la proprietà superiore che utilizziamo per l'impostazione della posizione superiore dell'elemento. Quando impostiamo qualsiasi valore in questa proprietà "top", la posizione dell'elemento verrà impostata in base al valore dato. Imposta il valore dalla parte superiore della pagina. Colpisce solo la posizione verticale dell'elemento. Possiamo impostare il valore di questa proprietà superiore in "PX", "EM" o anche "%". Quando vogliamo impostare alcuni elementi dalla parte superiore nella direzione verticale, utilizziamo questa proprietà "superiore" in CSS. In questa guida, useremo questa proprietà "top" in CSS e imposteremo la posizione degli elementi. Forniremo alcuni esempi in cui utilizziamo questa proprietà "top" e ti mostreremo come influisce sulla posizione dell'elemento.

Esempio 1:

Per applicare questa proprietà, dobbiamo avere alcuni elementi. Quindi, in primo luogo, creiamo alcuni elementi in HTML. Per creare un file HTML, dobbiamo aprire un nuovo file. Il codice Visual Studio è il software che utilizzeremo. Inizieremo la codifica in questo file. Digitiamo anche "!"E quindi fare clic su" Invio "per recuperare i tag di base HTML, che sono richiesti in tutti i codici HTML. Dopo tutto ciò, dobbiamo digitare il corpo in cui scriveremo alcuni paragrafi accanto all'intestazione. Stiamo impostando nomi diversi per ogni paragrafo, quindi utilizzeremo questi nomi quando appliciamo la proprietà "top" su questi paragrafi. Qui, abbiamo quattro paragrafi con il nome "P1", "P2", "P3" e "P4" e cambieremo la loro posizione migliore utilizzando la proprietà superiore in CSS.

Innanzitutto, abbiamo il tipo ". P1 "che rappresenta il primo paragrafo. Abbiamo impostato la sua "posizione" come "assoluta". Quindi, imposteremo la sua posizione dall'alto con l'aiuto della proprietà "superiore". In questo esempio, stiamo usando "%" con il valore della proprietà "top". Abbiamo impostato il valore della proprietà superiore del primo paragrafo come "10%". Inoltre, imposta il suo "colore" su "rosso" e "16px" per la "dimensione del carattere". Ora abbiamo il secondo paragrafo "P2". La sua "posizione" è anche "assoluta" e abbiamo impostato il valore di proprietà "superiore" del secondo paragrafo come "25%". Il suo "colore" del carattere è "verde" e "dimensione del carattere" è "18px". Quindi, la "posizione" del terzo paragrafo è di nuovo "assoluta" e la "parte superiore" è "40%". Il paragrafo "colore" è "blu" e "20px" è la "dimensione del carattere". Per il paragrafo "P4", imposteremo "70%" come carattere "top" e "viola" "colore" e "dimensione del carattere" è "22px" per questo quarto paragrafo.

Puoi vedere la posizione superiore di tutti i paragrafi è diversa in quanto abbiamo impostato queste posizioni migliori in questo esempio. Il primo paragrafo appare come "10%" dalla parte superiore della pagina in quanto abbiamo impostato "10%" nella proprietà "top". L'altro appare esattamente nella stessa posizione superiore che abbiamo impostato nel codice CSS.

Esempio n. 2:

In questo esempio, stiamo usando due elementi div di nomi diversi come "b" e "c" all'interno di un altro div "a". Ne abbiamo anche uno prima di questi elementi div. Ora applicheremo la proprietà "top" a questi elementi div.

Il "div. A "è il div principale che abbiamo creato nell'HTML e stiamo impostando la" posizione "di questo div come" relativo ". Quindi, stiamo utilizzando le proprietà "larghezza" e "altezza" e setiamo "400px" e "200px" rispettivamente. Stiamo creando il bordo per questo div usando la proprietà "bordo". La proprietà di larghezza e altezza sopra è qui per impostare la larghezza e l'altezza del bordo Div. Il "bordo" che stiamo impostando è "3px" nella sua larghezza e il "rosso" nel "colore" del tipo "solido". Abbiamo anche “Div. b "e imposteremo la" posizione "di questo" div. b "che è presente all'interno del primo div e lo imposta come" assoluto "e il suo" top "è" 0 ". Stiamo creando un bordo attorno a questo div usando la proprietà "bordo". Questo bordo è nel colore "blu" di tipo "3px" e "solido"."

Dopo questo, ci stiamo trasferendo al nostro ultimo div che è "Div. C". Ancora una volta abbiamo impostato la sua "posizione" su "assoluto" ma la sua "top" è "100px". In questo esempio, stiamo usando "PX" per impostare la "parte superiore" del terzo div. Il suo bordo è impostato come "verde" e il "colore di sfondo" è impostato qui come "verde chiaro".

Puoi notare che non c'è spazio tra i confini del primo div e il secondo div perché abbiamo impostato la parte superiore del secondo div come "0". Il terzo div è impostato come "100px" in modo da poter vedere nell'output come appare. Appare a "100px" sotto dal bordo superiore del primo div.

Esempio # 3:

Qui, ne abbiamo un'intestazione e poi il contenitore di div. All'interno di questo div principale, abbiamo anche altri tre contenitori. Tutti questi contenitori di Div sono di nomi diversi, quindi imposteremo valori migliori diversi per tutti i contenitori di div.

Innanzitutto, menzioniamo il nome di quel div che vogliamo modellare. Quindi, abbiamo messo il nome del primo div e poi modelliamo questo div usando la proprietà "posizione". Quindi, impostando il suo valore utilizzando la parola chiave "relativa". Abbiamo impostato la sua "parte superiore" su "00px" e la "larghezza" e "altezza" che stiamo impostando qui sono rispettivamente "400px" e "350px". Semperemo il suo tipo "bordo" su "2px" e "solido" nel colore "nero". Il secondo div "posizione" che stiamo impostando qui è "assoluto" e il valore della "parte superiore" è "50px" e il "bordo" è "rosso" di colore. La "posizione" del terzo div è impostata su "assoluto". Il valore "top" è "150px" per il terzo div e il colore "bordo" è "blu".

Quindi, viene fuori Div e di nuovo la "posizione" è "assoluta". "200px" valore superiore e "verde" per il "bordo". Tutti i confini che stiamo usando in questo codice sono in tipo "solido" e anche in larghezza "2px".

L'output mostra la posizione superiore di tutti i contenitori. Tutti gli elementi div appaiono in una posizione diversa dalla parte superiore del primo div. Questo è tutto a causa della proprietà "top" che abbiamo usato nel codice CSS.

Esempio # 4:

Ne abbiamo un'intestazione, quindi l'elemento Div principale e altri tre elementi Div all'interno dell'elemento Div principale. Usiamo nomi diversi per tutti gli elementi div. Quindi, useremo valori migliori separati per ciascuno di essi.

Abbiamo impostato l'altezza di Div DIV1 principale come "300px" e il suo "colore di sfondo" è "bianco". Quindi, ci stiamo spostando verso gli altri elementi Div che sono presenti all'interno di questo div principale. Stiamo impostando il valore della proprietà "top" di questi div in "em". Abbiamo impostato il secondo div "top" come "5em". Il terzo div "top" è "10em" e l'ultimo valore "top" è "20em".

In questo output, all'interno del primo Div, il secondo elemento Div è reso a "5em" dalla "parte superiore", il terzo div è reso a "10em" dalla "parte superiore", e anche il terzo div è reso a "20em "Dall'alto perché abbiamo usato la proprietà" superiore "qui nel nostro codice CSS.

Conclusione:

Questa guida ha spiegato come utilizzare la proprietà "top" di CSS. Abbiamo attraversato ciò che è la proprietà superiore e come impostarla in CSS. La proprietà "superiore" viene utilizzata qui per impostare la posizione degli elementi dall'alto e abbiamo usato "PX", "EM" e "%" per impostare il valore della proprietà "superiore". Abbiamo presentato più esempi in questa guida e anche. Abbiamo incollato tutti gli screenshot dei codici e l'output qui. Utilizzerai questa proprietà "top" nei tuoi codici dopo aver studiato a fondo questa guida.