CSS TOP

Góra jest opisana jako górny punkt. W CSS mamy najwyższą właściwość, której używamy do ustawienia górnej pozycji elementu. Po ustawieniu dowolnej wartości w tej właściwości „górnej” pozycja elementu zostanie ustawiona zgodnie z daną wartością. Ustawia wartość z góry strony. Wpływa tylko na pozycję pionową elementu. Możemy ustawić wartość tej najwyższej właściwości w „PX”, „EM” lub „%”. Kiedy chcemy ustawić niektóre elementy z góry w kierunku pionowym, używamy tej „górnej” właściwości w CSS. W tym przewodniku użyjemy tej „górnej” właściwości w CSS i ustawimy pozycję elementów. Podamy przykłady, w których korzystamy z tej „górnej” właściwości i pokażemy, jak wpływa ona na pozycję elementu.

Przykład 1:

Aby zastosować tę nieruchomość, musimy mieć pewne elementy. Najpierw tworzymy niektóre elementy w HTML. Aby zrobić plik HTML, musimy otworzyć nowy plik. Kod Visual Studio to oprogramowanie, które będziemy korzystać. Zaczniemy kodować w tym pliku. Ty również wpisujemy „!”, A następnie kliknij„ Enter ”, aby pobrać podstawowe tagi HTML, które są wymagane we wszystkich kodach HTML. Po tym wszystkim musimy wpisać ciało, w którym zamierzamy napisać akapity obok nagłówka. Ustawiamy różne nazwy dla każdego akapitu, więc będziemy używać tych nazwisk, gdy zastosujemy właściwość „TOP” w tych akapitach. Tutaj mamy cztery akapity o nazwie „P1”, „P2”, „P3” i „P4” i zmienimy ich najwyższą pozycję, wykorzystując najwyższą właściwość w CSS.

Po pierwsze, mamy typ „. P1 ”, który reprezentuje pierwszy akapit. Ustawiliśmy jego „pozycję” jako „absolutne”. Następnie ustawimy jego pozycję z góry za pomocą właściwości „górnej”. W tym przykładzie używamy „%” z wartością właściwości „górnej”. Ustawiamy wartość najwyższej właściwości pierwszego akapitu jako „10%”. Ustawia także „kolor” na „czerwony” i „16px” dla „wielkości czcionki”. Teraz mamy drugi akapit „P2”. Jego „pozycja” jest również „absolutna” i ustawiamy „najwyższą” wartość właściwości drugiego akapitu jako „25%”. Jego „kolor” czcionki jest „zielony”, a „wielkości czcionki” to „18px”. Następnie „pozycja” trzeciego akapitu jest ponownie „absolutna”, a „TOP” to „40%”. Akapit „Kolor” to „niebieski”, a „20px” to „wielkości czcionki”. W akapicie „P4” ustawiamy „70%” jako „top” i „fioletową” czcionkę „kolor” i „wielkości czcionki” to „22px” dla tego czwartego akapitu.

Możesz zobaczyć najwyższą pozycję wszystkich akapitów, ponieważ ustawiliśmy te najwyższe pozycje w tym przykładzie. Pierwszy akapit pojawia się jako „10%” z góry strony, ponieważ ustaliliśmy „10%” na właściwości „TOP”. Drugi pojawia się dokładnie w tej samej górnej pozycji, którą ustawiliśmy w kodzie CSS.

Przykład nr 2:

W tym przykładzie używamy dwóch elementów div różnych nazw jako „b” i „c” w innym div „a”. Mamy też jeden nagłówek przed tymi elementami div. Teraz zastosujemy „najwyższą” właściwość do tych elementów Div.

„Div. a ”jest główną divą, którą stworzyliśmy w HTML i ustalamy„ pozycję ”tego Div jako„ względnego ”. Następnie wykorzystujemy właściwości „szerokości” i „wysokości” i ustawiamy odpowiednio „400px” i „200px”. Tworzymy granicę dla tego div, używając właściwości „granicznej”. Powyższa właściwość szerokości i wysokości jest tutaj, aby ustawić szerokość i wysokość granicy DIV. „Granica”, którą ustawiamy, ma „3px” w szerokości i „czerwony” w „kolorze” typu „stałego”. Mamy również „Div. b ”, a my ustawimy„ pozycję ”tego„ div. b ”, który jest obecny w pierwszej divie i ustawia go jako„ absolut ”, a jego„ top ”to„ 0 ”. Tworzymy granicę wokół tego div, używając właściwości „granicznej”. Ta granica jest w kolorze „niebieskim” typu „3px” i „solidnego”."

Po tym przechodzimy do naszego ostatniego div, który jest „div. C". Ponownie ustawiliśmy jego „pozycję” na „Absolute”, ale jego „top” to „100px”. W tym przykładzie używamy „PX” do ustawiania „góry” trzeciego div. Jego granica jest ustalona jako „zielony”, a „kolor tła” jest tutaj ustawiony jako „jasnozielony”.

Możesz zauważyć, że nie ma miejsca między granicami pierwszej div a drugim divem, ponieważ ustawiamy szczyt drugiego div jako „0”. Trzecia Div jest ustawiona jako „100px”, więc można zobaczyć na wyjściu, jak się pojawia. Pojawia się w „100px” poniżej z górnej granicy pierwszej div.

Przykład nr 3:

Tutaj mamy jeden nagłówek, a następnie główny kontener DIV. Wewnątrz tej głównej div mamy również trzy inne kontenery Div. Wszystkie te kontenery Div mają różne nazwy, więc ustawiamy różne najwyższe wartości dla wszystkich kontenerów Div.

Najpierw wspominamy o nazwie tego div, który chcemy stylizować. Więc umieszczamy nazwę pierwszej div, a następnie stylizujemy tę div za pomocą właściwości „pozycji”. Następnie ustawiając swoją wartość za pomocą słowa kluczowego „względnego”. Ustawiliśmy „TOP” na „00px”, a „szerokość” i „wysokość”, którą ustawiamy tutaj, to odpowiednio „400px” i „350px”. Zamierzamy ustawić jego „granicę” na typ „2px” i „solidny” w kolorze „czarnym”. Druga „pozycja”, którą tutaj ustawiamy, to „Absolute”, a wartość „TOP” to „50px”, a „granica” jest „czerwona” w kolorze. „Pozycja” trzeciego div jest ustawiona na „absolutne”. Wartość „górna” to „150px” dla trzeciego div, a kolor „graniczny” jest „niebieski”.

Wtedy wychodzi do Div i znowu „pozycja” jest „absolutna”. Najważniejsza wartość „200px” i „zielona” dla „granicy”. Wszystkie granice, których używamy w tym kodzie, są w typu „solidne”, a także w szerokości „2px”.

Wyjście pokazuje najwyższą pozycję wszystkich kontenerów Div. Wszystkie elementy DIV pojawiają się w innej pozycji od góry pierwszej div. To wszystko z powodu „górnej” właściwości, której użyliśmy w kodzie CSS.

Przykład nr 4:

Mamy jeden nagłówek, a następnie główny element div i trzy kolejne elementy DIV w głównym elemencie div. Używamy różnych nazwisk dla wszystkich elementów div. Użyjemy więc oddzielnych najwyższych wartości dla każdego z nich.

Ustawiliśmy wysokość głównego div1 jako „300px”, a jego „kolor tła” jest „biały”. Następnie przechodzimy do innych elementów Div, które są obecne w tej głównej div. Ustawiamy wartość „górnej” właściwości tych Divów w „EM”. Ustawiliśmy drugą div „top” jako „5EM”. Trzeci Div „Top” to „10em”, a ostatnia wartość „Top” Div to „20em”.

W tym wyjściu, wewnątrz pierwszego div, drugi element div jest renderowany w „5em” z „top”, trzecia div jest renderowana w „10em” z „TOP”, a także trzecia div jest renderowana w „20em ”Z góry, ponieważ użyliśmy właściwości„ górnej ”tutaj w naszym kodzie CSS.

Wniosek:

Ten przewodnik wyjaśnił, jak korzystać z nieruchomości CSS „TOP”. Przeszliśmy przez to, czym jest najlepsza właściwość i jak ustawić ją w CSS. Właściwość „górna” jest tu używana do ustawiania pozycji elementów z góry i użyliśmy „PX”, „EM” i „%” do ustawiania wartości właściwości „górnej”. Przedstawiliśmy wiele przykładów w tym przewodniku. Wklejeliśmy wszystkie zrzuty ekranu kodów, a także wyjście tutaj. Użyjesz tej „górnej” właściwości w swoich kodach po dokładnym studiowaniu tego przewodnika.