Przewodnik po zrozumieniu i wykorzystaniu pozycji absolutnej Divi

Właściwość pozycji bezwzględnej jest jednym z czterech głównych typów pozycji dostępnych w nowych opcjach pozycji Divi. W tym samouczku dowiemy się, co to znaczy nadawać elementowi absolutną pozycję w Divi i jak można go wykorzystać na swoją korzyść podczas projektowania witryn Divi.

W tym poście omówimy:

• Przegląd czterech typów pozycjonowania Divi
• Jak pozycja absolutna „pozycjonuje” element w Divi
• Zalety i wady korzystania z pozycji absolutnej w Divi
• Używanie punktów lokalizacji z pozycją bezwzględną
• Przykładowy przypadek użycia: pozycjonowanie przycisków bezwzględnie dla rozmycia o tej samej wysokości

Sprawdź to!

Przegląd czterech rodzajów pozycjonowania Divi

Pozycja bezwzględna jest jedną z czterech opcji 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). Pozycja statyczna jest domyślną pozycją każdego elementu CSS. W Divi, kiedy wybierasz domyślną pozycję dla modułu, wybierasz 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żesz 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żesz użyć właściwości górnej, dolnej, lewej i prawej, 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 przewiniesz 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 absolutna „pozycjonuje” element w Divi

Jak wspomniano w przeglądzie, element pozycjonowany bezwzględnie zostanie umieszczony względem najbliższego pozycjonowanego kontenera nadrzędnego. Kontener nadrzędny pozycjonowany to dowolny kontener, któremu przypisano wartość pozycji inną niż statyczna (tj. względna, bezwzględna, stała). Dlatego w większości przypadków, jeśli chcesz umieścić element (np. moduł) absolutnie w jego kontenerze nadrzędnym (lub kolumnie), będziesz chciał nadać kolumnie pozycję względną przed bezwzględnym ustawieniem modułu potomnego. Jeśli nie, moduł pozycjonowany bezwzględnie będzie szukać dalej w dokumencie/stronie w poszukiwaniu najbliższego przodka z pozycją inną niż statyczna. Z tego powodu w Divi sekcje i wiersze mają domyślnie pozycję względną, dzięki czemu można łatwo umieszczać elementy w tych elementach.

Oto ilustracja tego, co zrobi moduł pozycjonowany bezwzględnie, jeśli zastąpię domyślną pozycję Divi dla kolumny i ustawię ją na statyczną. Zauważ, że ponieważ kolumna nie ma już pozycji, moduł stanie się teraz względny względem wiersza, który ma pozycję (względną).

Zalety i wady korzystania z pozycji absolutnej w Divi

Pozycja bezwzględna to tylko jedna z wielu metod pozycjonowania elementów. Dlatego warto byłoby omówić niektóre zalety i wady korzystania z pozycji bezwzględnej zamiast innych.

Korzyści

Oto kilka korzyści z używania pozycji bezwzględnej w porównaniu z innymi właściwościami pozycjonowania, takimi jak Transform Translate lub Margins:

Dobre narzędzie do projektowania

Pozycja bezwzględna Wyrywa się z normalnego przepływu, więc rzeczywista przestrzeń elementu nie wpływa na projekt po przeprowadzeniu pozycjonowania. Chociaż może to być również wadą, może to być korzystne, gdy chcesz dodać elementy do już ustalonego projektu bez dodatkowego czyszczenia, które może być potrzebne do dodania dodatkowej przestrzeni do układu. Innymi słowy, możesz dodawać elementy do strony bez konieczności przenoszenia istniejących elementów, aby to zrobić.

Dobra alternatywa dla pływaków i marż

Dzięki pozycji bezwzględnej nie musisz polegać na elementach pływających lub korzystaniu z marginesów, aby osiągnąć podobne pozycjonowanie. Chociaż nie jest to natywna opcja w Divi, ci, którzy są zaznajomieni z CSS, wiedzą, że możesz używać pływaków do pozycjonowania elementów po prawej lub lewej stronie, co w niektórych przypadkach może być nieco błędne i nieprzewidywalne. To samo dotyczy używania marginesów do pozycjonowania elementów. Czasami trudno jest przewidzieć dokładne wartości marginesów, aby umieścić element we właściwym miejscu bez pozostawiania niepotrzebnych odstępów. Używanie pozycji bezwzględnej może być dobrą alternatywą „precyzyjnego pozycjonowania” zarówno dla zmiennych, jak i marginesów.

Dobra obsługa przeglądarki

Właściwość pozycji bezwzględnej jest szeroko obsługiwana we wszystkich głównych przeglądarkach, więc zwykle można ufać, że nie zepsuje ona niespodziewanie elementów w innych przeglądarkach.

Wady

Oto kilka wad, które należy wziąć pod uwagę podczas korzystania z pozycji bezwzględnej:

Ryzyko izolacji

Ponieważ elementy pozycjonowane bezwzględnie wyłamują się z normalnego przepływu dokumentów, dodanie dodatkowych elementów w jego pobliżu może być trudne. Stają się odizolowane od innych elementów na stronie. Na przykład, zwykle w Divi, jeśli chcesz dodać przycisk pod modułem tekstowym, możesz po prostu dodać moduł, który automatycznie znajdzie się pod modułem tekstowym. Ale jeśli moduł tekstowy był pozycjonowany bezwzględnie, musiałbyś również ustawić moduł przycisku bezwzględnie, a następnie użyć właściwości góra, dół, lewo i prawo, aby umieścić przycisk pod modułem tekstu. Jednak łatwiej byłoby ustawić kolumnę (kontener modułu nadrzędnego) tak, aby wszystkie moduły w kolumnie mogły podążać za normalnym przepływem dokumentów (jak pozycjonowanie grupy modułów zamiast jednego).

Mniej responsywny

Również dlatego, że elementy pozycjonowane bezwzględnie wyłamują się z obiegu dokumentów, może być trudno sprawić, by pozycjonowanie było responsywne dla urządzeń mobilnych. W rzeczywistości wielu programistów unika pozycji:absolutnej z powodu wyzwań związanych z responsywnym projektowaniem. Dlatego ważne jest, aby w razie potrzeby używać jednostek długości względnej (takich jak vw lub %) zamiast jednostek długości bezwzględnej (takich jak px).

Używanie punktów lokalizacji z pozycją bezwzględną

Opcje lokalizacji pozycji, które są wbudowane w konstruktora Divi, ułatwiają pozycjonowanie elementów po prostu przez kliknięcie punktu lokalizacji. Po wybraniu punktu lokalizacji możesz użyć przesunięć w pionie i poziomie, aby wprowadzić dodatkowe korekty pozycji z tego punktu lokalizacji.

Domyślnie punkt lokalizacji zostanie ustawiony w lewym górnym rogu. Tak więc dodanie odsunięć w pionie i poziomie do tej lokalizacji doda dodatkowe odstępy od góry i od lewej.

Od położenia w prawym górnym rogu przesunięcie pionowe doda przestrzeń od góry, a przesunięcie poziome doda przestrzeń po prawej stronie.

Od położenia w prawym dolnym rogu przesunięcie pionowe doda przestrzeń od dołu, a przesunięcie poziome doda przestrzeń po prawej stronie.

Od położenia w lewym dolnym rogu przesunięcie pionowe doda przestrzeń od dołu, a przesunięcie poziome doda przestrzeń od lewej.

Dokonywanie zmian w wyśrodkowanych elementach absolutnych

Za każdym razem, gdy wybierzesz opcję lokalizacji z wyśrodkowaną pozycją, Divi używa kombinacji właściwości CSS, aby upewnić się, że element jest idealnie wyśrodkowany bez względu na rozmiar. Na przykład, jeśli wybierzesz położenie pozycji wyśrodkowane na lewo, Divi ustawi element w następujący sposób:

Oto jak wygląda CSS w backendzie.

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Top:50% służy do pozycjonowania górnej części elementu dokładnie 50% od góry pojemnika. Transform:translateY(-50%) ma na celu podniesienie elementu o dokładnie połowę jego wysokości. Daje to idealnie umieszczony element bez względu na wysokość.

Jest to ważne, jeśli chcesz dokonać dodatkowych korekt (lub przesunięć) elementu w wyśrodkowanej pozycji. Nie chcesz popełnić błędu, używając opcji translacji przekształć bez znajomości już używanych wartości. Z tego powodu najlepiej byłoby dokonać mniejszych korekt za pomocą właściwości margin w Divi zamiast przekształcać translację, chyba że rozumiesz, co robisz.

Używanie opcji przekształcenia przekształcenia do pozycjonowania wielu elementów bezwzględnych dla wyśrodkowanej lokalizacji

Jeśli rozumiesz, w jaki sposób transform:translate jest używane, może być bardzo przydatne do odsuwania wyśrodkowanych elementów bez konieczności znajomości szerokości elementu.

Załóżmy na przykład, że ustawiasz moduł tak, aby był wyśrodkowany zarówno w pionie, jak iw poziomie za pomocą kolumny w Divi. Wyglądałoby to tak.

Jeśli nadałem elementowi translację transformacji w następujący sposób, nic się nie zmieni:

• Przekształć Tłumacz (Y): -50%
• Przekształć Tłumacz(X): -50%

Dzieje się tak, ponieważ Divi robi to już automatycznie w backendzie dla Ciebie. Wiedząc o tym, możesz dokonywać korekt z położenia punktu środkowego, korzystając z opcji translacji przekształć. A jeśli używasz jednostki procentowej długości, nie musisz znać szerokości lub wysokości modułu, aby dokonać regulacji, ponieważ 100% równa się szerokości lub wysokości modułu. Tak więc, jeśli chcesz dodać cztery moduły na środku kolumny, możesz użyć opcji transformacji, aby przesunąć każdy z modułów pozycjonowanych bezwzględnie.

Aby to zrobić, utworzyłbyś cztery moduły i nadał im wszystkie pozycje bezwzględne z lokalizacją wyśrodkowaną w pionie i poziomie.

Następnie użyj opcji tłumaczenia transformacji, aby odpowiednio dostosować położenie modułów zgodnie z procentem szerokości i wysokości modułu. Na przykład nadanie modułowi wartości translacji przekształcenia w osi Y równej -100% spowoduje przesunięcie modułu w górę o dokładną wysokość modułu. Nadanie modułowi wartości osi X równej -100% przesunie moduł w lewo o dokładną szerokość modułu. To może być świetny sposób na połączenie elementów, które są absolutnie wyśrodkowane.

Przykładowy przypadek użycia: pozycjonowanie przycisków bezwzględnie dla rozmycia o tej samej wysokości

Jednym z praktycznych zastosowań używania pozycji bezwzględnej w Divi jest nadanie przyciskowi pozycji bezwzględnej wewnątrz kolumny, tak aby przycisk pozostawał na dole kolumny, nawet jeśli ilość (lub wysokość) zawartości nad nim może się zmienić. Może to być świetny sposób na zachowanie spójności projektu podczas prezentowania elementów na swojej stronie.

Oto jak to zrobić.

Najpierw dodaj jednokolumnowy wiersz do sekcji.

Następnie dodaj moduł notki do kolumny.

Następnie dodaj moduł przycisku poniżej modułu notki.

Otwórz ustawienia wiersza i dwukrotnie zduplikuj kolumnę, aby uzyskać w sumie trzy identyczne kolumny, każda z tym samym modułem notatek i przycisków.

Następnie przejdź do ustawień wierszy i wybierz opcję wyrównania wysokości kolumn. Dzięki temu kolumny dostosują się do wysokości kolumny o największej wysokości (lub największej zawartości).

Teraz zaktualizuj zawartość treści każdego z modułów notatek, aby ilość zawartości różniła się w każdej kolumnie. Powinieneś zobaczyć, że przycisk poniżej przesunie się do pozycji bezpośrednio pod modułem notatek, dzięki czemu każdy z przycisków znajdzie się w innej pozycji w kolumnie.

Używając wielokrotnego wyboru, wybierz każdy z modułów przycisków i zaktualizuj następujące ustawienia elementów dla każdego z przycisków:

• Pozycja: bezwzględna
• Lokalizacja: dolny lewy

Spowoduje to umieszczenie każdego z przycisków absolutnie w lewym dolnym rogu kolumny. Ale ponieważ przyciski znajdują się teraz poza normalnym przepływem elementów na stronie, zauważysz, że przycisk i moduł blurb w skrajnej lewej kolumnie częściowo się pokrywają. Aby to naprawić, musimy po prostu zrobić trochę rzeczywistego miejsca na przycisk, dodając trochę dopełnienia do kolumny w następujący sposób:

• Wypełnienie: dół 50px

Teraz masz trzy polecane elementy ze spójnym rozmieszczeniem przycisków dla każdego, nawet jeśli ilość treści (lub wysokość notki) może się zmienić.

Końcowe przemyślenia

Mam nadzieję, że ten post rzucił trochę światła na właściwość pozycji bezwzględnej i jak potężny może być używany w Divi. Gdy zrozumiesz, jak działa pozycja, możesz dodać wszelkiego rodzaju precyzyjne elementy projektu, które przeniosą Twoją witrynę na wyższy poziom.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!