CSS: Pozycjonowanie absolutne

0:00Część tej lekcji opowiem ci o pozycjonowanie absolutnym czyli generalnie

0:05pozycjonowanie które pozwala na wyrzucenie elementu z jego naturalnego flow.

0:10W tym przypadku nasz kontener tutaj jest

0:13pozycjonowanie na Flex Flex Direction jest to rock i Flex rap zawija te elementy.

0:19Jeżeli one się nie mieszczą w jednym wierszu no ale przy pomocy po zejściu na

0:23ląd możemy wyrzucić te elementy z tego standardowego flow.

0:26I właśnie teraz to zrobimy.

0:27Czyli na dowolnym elemencie.

0:30Powiedzmy że weźmiemy on.

0:33Możemy ustawić ten absurd i to tak naprawdę uruchamia nam

0:38pozycjonowanie absolutne w danym aucie dla tego elementu.

0:42Jak widzimy ten element przeskoczył nam

0:45tutaj na środek prawdopodobnie dlatego że ma automatyczny margines z góry i z dołu.

0:50Gdyby tego marginesu tutaj nie miał to on

0:53by się prawdopodobnie nie pozycjonowania w lewym górnym rogu.

0:56No i generalnie wszystkie pozostałe elementy

1:00zachowały swój normalny flow i przez to brakuje nam tutaj jednej karty

1:05na samym końcu ponieważ mamy już nierówną siatkę

1:09ponieważ w jednym wierszu mieści nam się sześć elementów oparcia a jeden jest poza.

1:16Tym standardowe są więc to co możemy teraz zrobić z tym elementem no to ustawić np.

1:21stop na 0 i w ten sposób ten element zostanie pociągnięty tutaj do góry.

1:27Ale co warto zauważyć to pozytywny absolutnie będzie pozycjonowania się w

1:32stosunku do najbliższego rodzica który nie ma pozycji statek czyli domyślnie jest to

1:39po prostu HTML jest to ród naszego elementu.

1:42Ale jeśli byśmy ustawili pozycję

1:45albo Absolute albo relatywnie na

1:49naszym kontenerze no to teraz ten element będzie równa się do faktycznie tego

1:54kontenera tutaj widzimy ten ciemniejszy box to jest drink Box naszego kontenera

2:00jeżeli ustawiamy sobie grunt na jaśniejszy szarym to faktycznie będziemy widzieli że

2:05teraz pociągnęło nam do górnej krawędzi naszego kontenera.

2:11Jeśli zrobimy tutaj Left zero no to

2:14analogicznie to się ciągnie do lewej strony.

2:17Co warto tutaj zauważyć to to że.

2:20Pozycją absolutnie nie bierze pod uwagę parkingu tzn.

2:23Te elementy nie są w pozycjonowanie biorąc

2:26pod uwagę parking co jest całkiem niezłym zachowaniem ponieważ możemy dzięki temu

2:30wstrzymywać elementy na parking czyli taką bezpieczną strefę danego elementu

2:36i wyświetlać tam rzeczy które powinny być tam wyświetlone np.

2:40jak jakieś krzyżyki przy zamykaniu medali no i cała treść elementu na pewno nie

2:45znajdzie na ten krzyżyk bo tam jest parking.

2:48Natomiast jeśli chcielibyśmy aby ten element był w pozycjonowanie absolutnie

2:52ale chcielibyśmy aby faktycznie respektować ten spadek

2:56no to możemy prostym sposobem użyć CSS Custom Properties.

3:01No i tutaj zdefiniować powiedzmy w naszym.

3:05Przejdźmy do naszego CSS

3:08i tutaj możemy zadeklarować na przykład fort parking oczywiście moglibyśmy to też

3:13zrobić na poziomie pojedynczego kontenera i w sumie może tak zróbmy.

3:17Może nie ma sensu tutaj tych globalnych

3:19naszych steli wpisywać więc ustawiamy sobie tutaj The parking

3:26na 1 rem no i możemy tutaj tego użyć War World parking.

3:34Jesteśmy w stanie teraz użyć tej wartości np.

3:36tutaj czyli War parking i będziemy mieli pewność że ten

3:40element jest wyrównany z respektowania tego marginesu bocznego i Górnego.

3:46I jest to o tyle dobre że faktycznie jeżeli zmienimy te wartości w jednym

3:50miejscu to ten element dalej będzie pozycjonowanie.

3:54W tym miejscu gdzie on się znalazł warto też zwrócić uwagę że ten element jeden

3:59jest teraz nad elementem numer dwa czy jego zakrywa.

4:02Jeżeli ustawiamy sobie indeks

4:04na minus jeden o warstwach też mówiłem w poprzednich częściach tego kursu no to

4:08widzimy że ten element znajduje się dokładnie pod nim.

4:14I co możemy dalej z tym robić.

4:16Oczywiście pozycjonowanie absolutne jest bardzo elastycznym mechanizmem.

4:24Tutaj możemy wrócić do.

4:26Welt parking wystawimy na.

4:30Zero.

4:31żeby tak naprawdę wyrównywać do krawędzi tego elementu.

4:37Piszemy z powrotem na 1.

4:40No i co możemy z tym dalej zrobić.

4:42Na przykład jesteśmy w stanie.

4:45Wycena element w każdej z jego osi

4:48niezależnie od tego jak jest pozycjonowanie czy jest na Flex czy jest

4:50na belce jesteśmy w stanie użyć pozycjonowania absolutnego i ustawić np.

4:56rajd na zero

4:57bo tam na zero czyli wszystkie nasze najmłodsze ustawiamy na zero.

5:02Tutaj to też jawnie napiszemy na zero bez tego Custom Properties.

5:06Zapisujemy i widzimy że ten element rozciągnąć się na całą szerokość.

5:11Aby temu zapobiec możemy ustawić margines auto.

5:15Czyli tak naprawdę z każdej strony będzie automatyczny margines i ten element

5:20nam się tutaj aby zajmować tylko tyle miejsca ile było mu dane.

5:26Zobaczmy dlaczego teraz to tam nie weszło

5:29to left Ride zero absolutny margines auto.

5:34Czy może to być kwestia Flex Box.

5:40Czy może bardziej kwestia tego że mnie

5:43zadeklarowany wysokość i szerokość wydaje mi się że mamy.

5:47Ale sprawdźmy to na.

5:53Być może faktycznie te wartości nie były

5:55zadeklarowany wydawało mi się że je deklarowali.

5:58Natomiast w tym momencie faktycznie widzimy że ten element jest pozycjonowanie

6:02się idealnie w centrum w osi pionowej i poziomej względem tego kontenera szarego.

6:08Nie jest to Nowe pozycjonowanie względem portu czy względem innych kart.

6:12Mamy tutaj absolutne pozycjonowanie

6:15względem najbliższego rodzica który ma pozytywny nie statek.

6:18Czyli tutaj moglibyśmy dać np.

6:20relatywnie i tak samo by to nam zadziałało.

6:24Tutaj pozycja absolutna też nam

6:25ściągnęła ten kontener więc tak naprawdę tutaj relatywnie będzie ok.

6:29.

6:29No i możemy na przykład ustawić sobie Box Shadow ustawione na 10 pikseli.

6:37Rozstrzelania i kolor powiedzmy czarny.

6:41Przesunięcie 0.

6:43I faktycznie widzimy że ta karta teraz nam wystaje ponad inne i możemy takie efekty

6:47robić przy pomocy pozycjonowania absolutnego.

6:51To co warto pamiętać że pozycjonowanie absolutne psuje jakby szyk standardowego

6:55generowania i może być gorszy dla performance u

6:58oraz to że przy użyciu technologii takich jak CSS GRID być może nie musimy już

7:04używać bezpośrednio pozytywny absolwent tylko możemy elementy siatki nakładać na

7:09siebie i w ten sposób symulować dokładnie taką samą sytuację jak tutaj zrobiliśmy.

7:17Absolutnie.

7:18To tylko jedna z wartości które przyjmuję.

7:22Są również styki relatywnie statek

7:25i generalnie samą tą właściwość też można byłoby poznawać naprawdę długo.

7:31Jest też pozytywny fix czyli element

7:34będzie ostatecznie wyświetlany zawsze w tym samym miejscu.

7:37Ale generalnie rozumiejąc pozycjonowanie

7:39absolutne wszystkie inne te właściwości też na pewno będziecie w stanie zrozumieć.

7:44No i będziecie w stanie tworzyć naprawdę dynamiczne.

7:47Z założeniem że faktycznie absolutnie to jest jedyne rozwiązanie danego problemu.

7:53Na pewno nie zachęcam.

7:55Do tworzenia jachtów pixel perfect bazując

7:59tylko i wyłącznie na pozycjonowanie absolutnym czyli tych wszystkich kart nie

8:03powinniśmy absolutnie ustawiać na takiej zasadzie że ten miałby top Left zero.

8:09Ten miałby top zero Left powiedzmy 6 frejmów ten miałby 12 remisów 18 itd itd.

8:18No bo po prostu to się nam rozsypie jak

8:20domek z kart jeżeli którykolwiek z tych elementów usunie atak.

8:23Mamy ładne generowanie i możemy na przykład kilka elementów naraz ustawiać

8:28sobie jeden na drugim i nie będzie z tym najmniejszego problemu

8:31więc po prostu pamiętajmy aby korzystać z narzędzia dostosowano go do problemu.

8:38To wszystko w tej lekcji. Dzięki za uwagę.