Zrozumienie i wykorzystanie względnej pozycji w Divi

Właściwość pozycji względnej jest prawdopodobnie najbardziej tajemniczym z typów pozycji. Jednak gdy już zrozumiemy, jak to działa, możemy wykorzystać to na naszą korzyść podczas projektowania witryny w Divi. To, co odkryjemy, może Cię zaskoczyć.

W tym poście omówimy:

• Przegląd czterech typów pozycjonowania Divi
• Jak pozycja względna „pozycjonuje” element w Divi
• 5 powodów używania pozycji względnej w Divi
• Pozycja względna a marża
• Pozycja względna a tłumaczenie przekształcenia

Sprawdź to!

Przegląd czterech rodzajów pozycjonowania Divi

Pozycja względna jest jednym z czterech typów pozycji dostępnych w Divi. Oto krótki przegląd każdego z nich poniżej.

Statyczny (domyślny)

Z technicznego punktu widzenia elementy statyczne nie są „pozycjonowane”, ponieważ pozostają w normalnym przepływie lub kolejności elementów na stronie i nie reagują na właściwości górnej, prawej, dolnej i lewej, jak inne pozycjonowane elementy (dlatego nie offsety są dostępne w Divi dla elementów w pozycji statycznej/domyślnej). W Divi, kiedy wybieramy domyślną pozycję dla modułu, wybieramy pozycję statyczną. Warto również wspomnieć, że niektóre elementy w Divi (takie jak wiersze i sekcje) będą domyślnie miały pozycję względną (nie pozycję statyczną).

Względny

Względnie pozycjonowane elementy przypominają elementy statyczne, ponieważ podążają za normalnym przepływem strony. Główna różnica polega na tym, że elementy pozycjonowane względnie mogą być pozycjonowane przy użyciu właściwości góra, dół, lewo i prawo. Ponadto, w przeciwieństwie do elementów statycznych, można je również pozycjonować za pomocą właściwości Z Index.

Absolutny

Element pozycjonowany bezwzględnie wyłamuje się z normalnego przepływu dokumentu i dlatego na stronie nie jest tworzone żadne miejsce dla tego elementu. Możemy myśleć o tym jako o elemencie unoszącym się nad innymi elementami na stronie, które zajmują rzeczywistą przestrzeń. Zostanie ustawiony względem najbliższego umieszczonego kontenera nadrzędnego.

Naprawiony

Podobnie jak pozycja bezwzględna, elementy ze stałą pozycją wyłamują się z normalnego przepływu strony i nie będą miały rzeczywistej przestrzeni utworzonej na stronie. Kluczową różnicą między bezwzględną a stałą jest to, że stała pozycja jest względna w stosunku do okna przeglądarki lub rzutni. Innymi słowy, bez względu na to, gdzie element znajduje się w normalnym toku strony, po ustaleniu stałej pozycji, jego pozycja będzie teraz bezpośrednio odnosić się do okna przeglądarki. Możemy użyć właściwości top, bottom, left i right, aby umieścić element w rzutni. Ponieważ stałe elementy często unoszą się za lub przed innymi elementami na stronie, Z Index pomoże uporządkować stałe elementy nad innymi.

UWAGA: W CSS istnieje inny rodzaj pozycjonowania zwany przyklejonym. Element pozycjonowany przyklejony zachowuje się jak element pozycjonowany względnie, dopóki nie przewiniemy do jego kontenera (w pewnym momencie określonym przez najwyższą wartość). Następnie element zostaje unieruchomiony (lub przyklejony) do momentu przewinięcia przez użytkownika do końca kontenera. Jednak lepka pozycja może być nieco nieprzewidywalna, ponieważ inne czynniki mogą hamować funkcjonalność. Z tego powodu w Divi opcja przyklejania nie jest dostępna we wbudowanych opcjach. Istnieją jednak sposoby na użycie „position:sticky” w Divi.

Jak pozycja względna „pozycjonuje” element w Divi

Jak wspomniano w przeglądzie, typ pozycji względnej jest podobny do statycznej „pozycji”, ponieważ element pozostaje w normalnym przepływie dokumentu (HTML na stronie). Prawdziwa różnica polega na tym, że gdy już przypiszemy elementowi pozycję względną, teraz dostępne są nowe opcje pozycjonowania elementu. Opcje te obejmują właściwości top, bottom, left i right, a także właściwość Z Index.

W Divi te dodatkowe opcje pozycji można znaleźć w grupie opcji pozycji po wybraniu pozycji względnej.

Korzystanie z przesunięć z pozycją względną

Wartości Offset Origin i Offset będą współpracować, aby umieścić nasz element w dowolnym miejscu w kontenerze nadrzędnym. W tym przykładzie mamy moduł, który ma pozycję względną, przesunięcie w lewym górnym rogu, przesunięcie w pionie 25px i przesunięcie w poziomie 25px. Zwróć uwagę, jak wartości odsunięcia przesuną element od początku odsunięcia w poziomie i/lub w pionie.

Oto ten sam moduł z tymi samymi przesunięciami, ale z początkiem przesunięcia w prawym górnym rogu.

Oto ten sam moduł z tymi samymi przesunięciami i początkiem przesunięcia w prawym dolnym rogu.

A oto ten sam moduł z tymi samymi przesunięciami i początkiem przesunięcia w lewym dolnym rogu.

Brak niespodzianek z odstępami

W przypadku pozycjonowania względnego rzeczywista przestrzeń elementu pozostaje na swoim pierwotnym miejscu po przesunięciu elementu za pomocą przesunięć (góra, dół, lewo, prawo). Nowa pozycja elementu nie przesuwa ani nie wpływa na odstępy między pozostałymi elementami na stronie. Zasadniczo unosi się nad innymi elementami jak duch, który opuścił jego ciało.

Powody, dla których warto korzystać z pozycji względnej

#1 Renderowanie kontenera nadrzędnego dla elementów absolutnie pozycjonowanych

Jest to prawdopodobnie najpopularniejsza aplikacja typu pozycja względna. Ponieważ każdy element pozycjonowany bezwzględnie jest zależny od najbliższego pozycjonowanego przodka, możemy wybrać, aby jeden z jego przodków stał się elementem pozycjonowanym, po prostu nadając mu pozycję względną (domyślna pozycja statyczna nie jest technicznie „pozycjonowana”). To utrzymuje przepływ dokumentów na miejscu (jak statyczny) i pozwala nam wybrać kontener dla elementów bezwzględnych.

# 2 Przenoszenie elementów bez wpływu na inne elementy na stronie.

Dzięki pozycji względnej możemy użyć przesunięć, aby podsunąć elementy do wyrównania bez wpływu na inne elementy. A dzięki Divi możemy skorzystać z przeciąganego interfejsu użytkownika, aby wizualnie pozycjonować elementy w czasie rzeczywistym.

#3 Aby użyć indeksu Z do nakładania się innych elementów

Domyślnie elementów statycznych nie można zmienić kolejności na osi Z, chyba że zostaną podane względne położenie. W pozycji względnej element pozostanie na swoim miejscu w normalnym przepływie dokumentu. Dopiero teraz mamy możliwość skorzystania z indeksowania Z, aby umieścić elementy w określonej kolejności podczas nakładania się na siebie.

#4 Aby uniknąć używania ujemnego marginesu do celów pozycji

Pozycjonowanie względne pozostawi przestrzeń swojego pierwotnego położenia. Jednak przy ujemnym marginesie przenoszona jest zarówno zawartość, jak i jej oryginalna przestrzeń. Na przykład, jeśli dodamy ujemny górny margines do wiersza w Divi, tak aby wiersz nakładał się na wiersz nad nim, wszystkie wiersze / zawartość przesuną się wraz z nim. Pozostawia to trochę bałaganu do posprzątania, którego można by uniknąć, używając zamiast tego względnych przesunięć pozycji.

Oto ilustracja tego, co się stanie, gdy użyjemy ujemnego górnego marginesu, aby przesunąć moduł w górę. Zwróć uwagę, w jaki sposób pozostałe elementy poniżej są z nim związane.

Jeśli nadamy temu samemu modułowi pozycję względną, możemy użyć pionowego przesunięcia, aby podnieść moduł w górę bez wpływu na resztę odstępów na stronie.

Chociaż często używam ujemnego marginesu do pozycjonowania elementów w Divi, prawdopodobnie nie jest dobrym pomysłem, jeśli zamiast tego możemy użyć pozycjonowania względnego. Margines odnosi się do modułu box elementu, więc tak naprawdę ma na celu dodanie odstępów w samym elemencie i wokół niego, a nie w celu pozycjonowania elementu odsuniętego od jego kontenera nadrzędnego, jak w przypadku pozycjonowania względnego.

Pozycja względna a tłumaczenie przekształcenia

Pozycja względna jest bardzo podobna do używania transform translate do pozycji elementów na stronie. Oboje przesuwają element, pozostawiając rzeczywistą przestrzeń w pierwotnym miejscu i bez wpływu na inne elementy na stronie.

Tłumaczenie jest lepsze w przypadku animacji i przejść (takich jak efekty najechania kursorem)

Wydaje się jednak, że translate jest najlepszy do animacji i przejść (takich jak efekty najechania), ponieważ zapewnia szybsze i płynniejsze przejścia. Używanie przesunięcia górnego, dolnego, lewego i prawego do animowania lub przenoszenia względnego elementu może być bardziej niestabilne i może sprawić, że nasza przeglądarka będzie pracować ciężej niż potrzebuje.

Jednostki długości względnej reagują inaczej

Jeśli używamy jednostek długości względnej (takich jak % lub vw) do projektowania responsywnego, będą one działać inaczej z relatywną pozycją i translacją transformacji.

Moduł Divi z położeniem względnym i przesunięciem w poziomie równym 50% przesunie moduł w poziomie o wielkość równą 50% szerokości kontenera nadrzędnego (lub kolumny).

Moduł Divi z translacją transformacji (oś X) 50% przesunie moduł w poziomie o wartość równą 50% szerokości samego modułu.

Łączenie pozycji względnej i przekształcenie przekształcenia na elementy centralne

Jak już omówiliśmy, pozycja względna jest względna w stosunku do rodzica, a właściwość transform translate odnosi się do samego elementu. Z tego powodu możemy używać obu w połączeniu do pozycjonowania elementów tak, jak chcemy. Możemy nawet użyć tej techniki do wyśrodkowania elementów w ich pojemniku.

Na przykład, możemy użyć względnego przesunięcia w poziomie, aby ustawić moduł dokładnie na prawo o 50% szerokości kolumny.

Następnie użyj właściwości translate, aby przesunąć moduł o 50% (szerokości modułu) w lewo. Zapewni to, że moduł pozostanie na środku kolumny bez względu na szerokość modułu.

Końcowe przemyślenia

Jeśli jesteś taki jak ja przed napisaniem tego artykułu, prawdopodobnie nie zrozumiałeś lub nie używałeś zbyt dobrze typu pozycji względnej. Być może najbardziej zaskakującym aspektem tej względnej pozycji jest to, jak wpływa (lub nie) na resztę projektu na stronie. Nie tylko działa w parze z elementami bezwzględnymi, ale również działa dobrze z przekładem transformacji na elementy pozycjonujące w idealnym miejscu.

Jakie masz doświadczenia z relatywnym typem pozycji?

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!