CSS: Warstwy

0:00W tej lekcji będziemy mówili o warstwach.

0:03I nie chodzi tutaj o warstwy które nadchodzą w specyfikacji CSS a o tym

0:07będziemy jeszcze mówili później w tym kursie.

0:10Natomiast chodzi o warstwy w kontekście indeksów.

0:15Generalnie strony internetowe można traktować jako 2 wymiarowej takie płaskie.

0:21Dokumenty na których wyświetlane

0:23poszczególne rzeczy i dopóki jeden element nie chodzi na drugi to jest

0:28to całkiem intuicyjne zwłaszcza jeżeli mamy elementy

0:32po prostu w HTML u na zasadzie że 1 DF jest dzieckiem drugiego i on się wyświetla

0:37jakby wewnątrz niego no to to wszystko jest OK.

0:41Gorzej jeżeli tworzymy jakieś menu albo leje czy dodatkowe

0:46komponenty które mają się pokazywać ponad cały nasz element

0:50interfejsu użytkownika no i wtedy bardzo przydatne jest takie polecenie jak Index

0:55indeks pozwala nam ustawiać elementy w górę lub w dół

0:59tak jakbyśmy pracowali faktycznie na warstwach czyli w tym przykładzie.

1:04Stworzyłem tutaj kilka elementów o klasie

1:07Box no i odpowiednich numerach tak aby można byłoby je jakoś łatwo rozróżnić

1:12i ustawić im różne indeksy one są w

1:15pozycjonowanie absolutnie możecie tutaj wejść do CSS i zobaczyć jak to tutaj jest

1:20zrobione no i generalnie widzicie że Jedynka Trójka i Czwórka.

1:27Zachodzą na siebie

1:29czyli w tym przypadku jedynka jest

1:32najniżej trójka jest nad nią i jej czwórka jest jeszcze nad tą trójką.

1:37Jeżeli byśmy zachowali wszystkie indeksy

1:39możemy tak zrobić dla testu to style wyglądałyby w ten sposób

1:43praktycznie jest to samo więc możemy przywrócić te wartości.

1:46Dlaczego One tutaj są.

1:47I dlaczego tak naprawdę nic się nie

1:49zmieniło ponieważ jeżeli Domyślną wartością indeksu jest zero to

1:54jest wartość wyjściowa tak samo jak w Flex order czy w innych właściwościach tego

1:59typu możemy przesuwać elementy warstwami do tyłu lub do przodu tzn.

2:06Prawidłową wartością dla indeksu jest na przykład minus 1

2:12i jeśli damy na czwarty element set indeks minus 1 to on

2:17nam powinien wskoczyć pod tą trójkę tak no bo mamy tutaj.

2:24Indeks 1.

2:25Natomiast tutaj się tak nie stało.

2:28Spróbujmy może innym przykładem.

2:30Czyli tą samą trójkę ustawiamy na minus 1 i jedynka zostanie na zwierzę.

2:37No i w tym przypadku to faktycznie

2:39zadziałało dlaczego w przypadku czwórki to nie zadziałało zaraz o tym powiem

2:42natomiast jesteśmy w stanie ustawiać elementy.

2:46Wedle ich warstw przy pomocy właściwości

2:49ZET Index i jest to całkiem intuicyjne im mniejszą wartość ma indeks tym niżej w

2:56hierarchii jeżeli byśmy dodali sobie dodatkowe elementy to moglibyśmy pod tą

3:01trójkę jeszcze jakiś element wstawić i trójka by to ukrywała

3:05albo możemy faktycznie zwiększyć tej trójce wartość i wtedy ona się pojawi.

3:09Nad Jedynką pomimo tego że jedynka była zadeklarowana wcześniej.

3:14Nawet w samym RKPb to generalnie chodzi o pozycję w markecie.

3:19Jeżeli indeksy są równe pozycja w markach nie definiuje co jest na wierzchu.

3:23Jeżeli pozycja absolutnie i moglibyśmy tutaj tak naprawdę dowolną

3:27wysoką wartość chyba limitem dla indeksu jest

3:32maksymalna wartość jaką JavaScript może w ogóle przechowywać w pamięci.

3:37Jest taka magiczna zmienna Max Integer

3:40Value i podejrzewam że to jest maksymalna wartość indeksu.

3:44Natomiast tak czy siak jeżeli z indeksów jest więcej niż 20 to

3:48prawdopodobnie już jest coś nie tak z naszym kodem źródłowym ponieważ jesteśmy w

3:53stanie spokojnie tworzyć najbardziej skomplikowane strony przy pomocy naprawdę

3:56niewielu warstw więc złą praktyką jest zdecydowanie dawanie tutaj jakiejś

4:01dziewiąte żeby element wskoczył zwłaszcza że w niektórych przypadkach to nawet nie

4:04zadziała ponieważ jeśli chcielibyśmy tutaj tą jedynkę przepraszam czwórkę przenieść

4:11pod jedynkę no to nieważne jak damy niską wartość to nie zadziała.

4:16Dlaczego do gry wchodzi

4:18taking kontekst czyli jakby kontekst nakładania się na siebie elementów.

4:22Jeśli spojrzymy w kod źródłowy tutaj to

4:24zobaczymy że każdy jeden z boksów jest jakby bezpośrednim dzieckiem.

4:29Ale w przypadku czwórki czwórka jest zagrożona wewnątrz trójki

4:34tzn znaczy że jej indeks jest względny dla tego elementu to znaczy nie jesteśmy w

4:40stanie przenieść czwórki pod jedynkę bez przesuwania trójki pod jedynkę bo

4:47ustawiając trójkę pod jedynkę oczywiście możemy to zrobić ale wtedy czwórka.

4:54Znajdzie się również pod jedynką.

4:56Nie mamy możliwości teraz podbić specyficznej sieci

5:00przepraszam indeksu

5:01na elemencie czwartym tak żeby On przeskoczył ponieważ marka

5:06definiuje właśnie kontekst i nie jesteśmy w stanie tego zrobić.

5:09Najprostszym odejściem byłoby tak naprawdę

5:11przeniesienie tego elementu gdzieś poza kontekst i ustawienie go tak

5:17pozycjonowanie absolutne też ma względne rodzica który ma

5:22pozycjonowanie absolutne o tym też będziemy mówić później.

5:27Więc tutaj musielibyśmy zmienić

5:29style czwórki żeby faktycznie była z powrotem nad tą jedynką.

5:33Natomiast nie zawsze jest to możliwe dlatego jeżeli tworzy się np.

5:37komponent jakiejś PO PAP modele są bardzo częstym przykładem

5:41dla indeksów no bo oczywiście muszą modele być ponad całym naszym elementem

5:46interfejsów użytkownika i wewnątrz tych modeli też często są

5:50jakieś over leje na sobie w związku z czym taki kontekst mógłby wystąpić tutaj jeżeli

5:55to byłby nasz model a tutaj byłby jakiś user Box powiedzmy

6:00i ten juz Box miałby na sobie jakiś tam element pozycjonowania absolutnie np.

6:05bądź nie bądź za pomocą Greena

6:07i chcielibyśmy wyskoczyć tym z boksem po nas.

6:10Ten model no to oczywiście nie będziemy

6:12tego mogli zrobić jeżeli model będzie miał ustawiony indeks.

6:15Generalnie może to brzmieć dosyć skomplikowanie natomiast jeżeli zaczniemy

6:18pracować z indeksami no to na pewno sobie z tym radę ponieważ jest to w miarę

6:22intuicyjne taking kontekst jest jedynym przypadkiem kiedy indeksy nie działają w

6:27sposób taki intuicyjny żeby to sobie lepiej zobrazować.

6:31Ja dawno temu korzystałem z Firefoxa w wersji przed 40 tą szóstą na pewno

6:36bo w 46 tej wersji niestety to zostało usunięte.

6:40Natomiast w tym momencie Microsoft Edge

6:42czyli nowej przeglądarce od Microsoftu która zastępuje

6:46jakby poprzednie poprzedniego aha i Internet Explorera który jest oparty na

6:50chronią mamy taki podgląd trójwymiarowy naszej strony możemy sobie tutaj odświeżyć

6:56i widzimy wybierając tutaj znak elipsy czyli rzeczki.

7:01Jest taki dział i możemy kliknąć 3D View

7:05czyli 3D View pozwala nam podejrzeć jak tak naprawdę będą wyglądały nasze indeksy.

7:12I to jest wizualizacja naszej strony czyli tutaj ten pasek

7:17prezentuje nam ten tekst reset Index no i pojedyncze nasze boksy też mają swój

7:23indeks opisany ten tutaj ma domyślne zero więc to nie jest wyświetlane chyba że

7:28ten element ma tutaj opisane że indeks to jest nasze.

7:32Nasza dwójka jest tutaj domyślnie te

7:35elementy które nie mają jawnie deklarowanego indeksu nie są wyświetlane

7:39natomiast jesteśmy w stanie w

7:40trójwymiarowy sposób podejrzeć który element jest pod którym jest to naprawdę

7:44bardzo fajne narzędzie to narzędzie Firefox było o wiele mniej wydajne.

7:50I tutaj duży plus dla Microsoft

7:53Edge i dla tej części narzędzi deweloperskich tej przeglądarki

7:57Chrome nie ma takiej właściwości więc jeżeli chcielibyście sobie dywagować

8:00indeksy w ten sposób no to tylko w tym momencie mecz jest dostępny.

8:06No i widzimy że elementy które mają wyższy

8:08indeks są jakby powyżej pozostałych to znaczy tu jest nasz cały

8:13element całe nasze baby moglibyśmy sobie stworzyć tak naprawdę jakiś element

8:18pod spodem żeby widzieć że to jest początek naszej strony.

8:21No i tutaj każdy z tych elementów możemy sobie w ogóle zaznaczyć i zobaczyć który

8:25element na stronie ma jakąś wartość indeksu.

8:28Co prawda kontekst nie jest tutaj

8:31reprezentowany natomiast ciężkie byłoby to po prostu do.

8:35Przedstawienia wizualnie

8:37do tego po prostu jest pokazywane tak jak one się generują na stronie że trójka

8:42żółta jest pod spodem jedynki tak samo jak czwórka.

8:45Natomiast czwórka jest wyżej tej naszej dwójki.

8:50Bardzo fajne narzędzie polecam się z nim pobawić zwłaszcza jeżeli nie jesteś

8:54jeszcze zaznajomić się z indeksami a także jeżeli

8:58zdarza ci się na stronie że twój element gdzieś tam wyjeżdża zwłaszcza jak tworzysz

9:03style Response pod daną rozdzielczość ekranu.

9:07Może się zdarzyć że czasami element

9:09wyjeżdża poza port i ciężko to zobaczyć w tym narzędziu będziesz to widział oraz

9:14będziesz wiedział jaki dany element ma zasięg.

9:16Dlatego polecam konkretnie w tym przypadku Microsoft.

9:20Szczerze mówiąc to jest chyba jedyne

9:22narzędzie którego używam w Microsoft Edge u ale też na tyle że indeks jest prosty do

9:29pracy że najlepsze narzędzie będzie tak naprawdę przy dywagować o innych problemów

9:34z autem bądź po prostu poznawania indeksów i całej ich logiki.