CSS -topp

Toppen beskrives som det øvre punktet. I CSS har vi den øverste eiendommen som vi bruker for å sette toppposisjonen til elementet. Når vi setter noen verdi i denne "topp" -egenskapen, vil elementets plassering bli satt i henhold til den gitte verdien. Den setter verdien fra toppen av siden. Det påvirker bare elementets vertikale plassering. Vi kan sette verdien av denne toppegenskapen i “PX”, “EM” eller også “%”. Når vi ønsker å sette noen elementer fra toppen i vertikal retning, bruker vi denne "øverste" egenskapen i CSS. I denne guiden vil vi bruke denne "topp" -egenskapen i CSS og sette elementene plassere posisjonen til. Vi vil gi noen eksempler der vi bruker denne "øverste" egenskapen og vil vise deg hvordan det påvirker elementets plassering.

Eksempel nr. 1:

For å bruke denne eiendommen, må vi ha noen elementer. Så først lager vi noen elementer i HTML. For å lage en HTML -fil, må vi åpne en ny fil. Visual Studio Code er programvaren vi bruker. Vi begynner å kode i denne filen. Vi skriver også "!”Og klikk deretter“ Enter ”for å hente HTML Basic Tags, som kreves i alle HTML -koder. Etter alt dette må vi skrive inn kroppen vi skal skrive noen avsnitt ved siden av overskriften. Vi setter forskjellige navn for hvert avsnitt, slik at vi bruker disse navnene når vi bruker "Topp" -egenskapen på disse avsnittene. Her har vi fire avsnitt med navnet “P1”, “P2”, “P3” og “P4”, og vi vil endre topplassering ved å bruke toppegenskapen i CSS.

Først har vi type ". P1 ”som representerer første ledd. Vi setter sin "posisjon" som "absolutt". Deretter kommer vi til å sette sin posisjon fra toppen ved hjelp av "topp" -egenskapen. I dette eksemplet bruker vi "%" med verdien av "topp" -egenskapen. Vi setter verdien av den øverste egenskapen til første ledd som "10%". Setter også sin "farge" til "rød" og "16px" for "fontstørrelse". Nå har vi andre avsnitt “P2”. Dens "posisjon" er også "absolutt", og vi setter "topp" egenskapsverdien til andre ledd som "25%". Den "fargen" på font er "grønn" og "fontstørrelse" er "18px". Deretter er tredje avsnitts "posisjon" igjen "absolutt" og "toppen" er "40%". Paragrafen "farge" er "blå" og "20px" er "fontstørrelse". For "P4" -avsnittet skal vi sette "70%" som "topp" og "lilla" font "farge" og "fontstørrelse" er "22px" for dette fjerde avsnittet.

Du kan se topplassering av alle avsnitt er annerledes, da vi har satt disse toppposisjonene i dette eksemplet. Første avsnitt vises som "10%" fra toppen av siden, da vi har satt "10%" i "topp" -egenskapen. Den andre vises nøyaktig i samme toppposisjon som vi har satt i CSS -koden.

Eksempel 2:

I dette eksemplet bruker vi to divelementer med forskjellige navn som “B” og “C” i en annen div “A”. Vi har også en overskrift før disse divelementene. Nå vil vi bruke "topp" -egenskapen på disse divelementene.

“Div. A ”er hoveddiven som vi har opprettet i HTML, og vi setter“ posisjonen ”til denne diven som“ slektning ”. Deretter bruker vi egenskapene til "bredde" og "høyde" og setter "400px" og "200px" for disse. Vi skaper grensen for denne diven ved å bruke "grensen" -egenskapen. Ovennevnte og høydeegenskapen er her for å sette bredden og høyden på Div -grensen. "Grensen" vi setter er "3px" i bredden og "røde" i "fargen" på "solid" type. Vi har også “Div. B ”og vi kommer til å sette“ posisjonen ”til denne“ div. B ”som er til stede inne i den første diven og setter den som“ absolutt ”og dens“ topp ”er“ 0 ”. Vi skaper en grense rundt denne diven ved å bruke "grensen" eiendommen. Denne grensen er i den "blå" fargen på "3px" og "solid" type.”

Etter dette flytter vi til vår siste div som er “Div. C ”. Igjen satte vi dens "posisjon" til "absolutt", men dens "topp" er "100px". I dette eksemplet bruker vi "PX" for å sette "toppen" av den tredje div. Grensen er satt som "grønn" og "bakgrunnsfargen" er satt her som "lysegrønn".

Du kan legge merke til at det ikke er noen plass mellom grensene til den første div og den andre div fordi vi satte toppen av den andre diven som "0". Den tredje div er satt som "100px" slik at du kan se i utgangen hvordan det ser ut. Det vises på “100px” nedenfor fra øverste kant av First Div.

Eksempel nr. 3:

Her har vi en overskrift og deretter Main Div Container. Inne i denne hoveddiven har vi også tre andre DIV -containere. Alle disse DIV -containerne har forskjellige navn, så vi vil angi forskjellige toppverdier for alle DIV -containere.

Først nevner vi navnet på den diven som vi vil style. Så vi legger navnet på den første diven og styler deretter denne diven ved å bruke "posisjon" -egenskapen. Deretter setter du verdien ved å bruke det "relative" nøkkelordet. Vi setter dens "topp" til "00px" og "bredden" og "høyden" vi setter her er henholdsvis "400px" og "350px". Vi kommer til å sette "grensen" til "2px" og "solid" type "svart" farge. Den andre diven "posisjonen" vi setter her er "absolutt" og verdien av "toppen" er "50px" og "grensen" er "rød" i fargen. "Posisjonen" til den tredje div er satt til "absolutt". "Topp" -verdien er "150px" for den tredje diven og "grensen" -fargen er "blå".

Så kommer frem Div og igjen "posisjon" er "absolutt". “200px” toppverdi og “grønn” for “grensen”. Alle grenser vi bruker i denne koden er i "solid" type og også i "2px" bredde.

Utgangen viser deg topp plassering av alle DIV -containerne. Alle divelementer vises på en annen posisjon fra toppen av den første diven. Dette er alt på grunn av den "topp" egenskapen som vi har brukt i CSS -koden.

Eksempel 4:

Vi har en overskrift, deretter Main Div -elementet, og tre flere divelementer inne i hoveddivelementet. Vi bruker forskjellige navn for alle divelementer. Så vi bruker separate toppverdier for hver av dem.

Vi setter hoveddiv1ens høyde som "300px" og dens "bakgrunnsfarge" er "hvit". Deretter flytter vi til de andre divelementene som er til stede i denne viktigste diven. Vi setter verdien av "topp" -egenskapen til disse divene i "em". Vi satte den andre diven "toppen" som "5em". Den tredje div “topp” er “10em” og den siste div “topp” -verdien er “20M”.

I denne utgangen, inne i den første div, blir det andre DIV -elementet gjengitt til “5em” fra “Top”, er den tredje div gjengitt til “10em” fra “Top”, og også den tredje div er gjengitt til “20EM ”Fra toppen som vi har brukt“ topp ”-egenskapen her i vår CSS -kode.

Konklusjon:

Denne guiden har forklart hvordan du bruker CSSs "topp" -egenskap. Vi har gått gjennom hva topp eiendom er, og hvordan du setter den i CSS. Egenskapen "Topp" brukes her for å sette elementene fra toppen fra toppen, og vi har brukt "PX", "EM" og "%" for å sette verdien av "Top" -egenskapen. Vi har presentert flere eksempler i denne guiden og også. Vi har limt inn alle skjermbildene av kodene, så vel som utdataene her. Du vil bruke denne "topp" -egenskapen i kodene dine etter å ha studert denne guiden grundig.