Pozycja CSS: Przykłady

Rootery są często trudne do pozycjonowania elementów za pomocą CSS. W rzeczywistości właściwość Pozycja CSS jest o wiele łatwiejsza do nauczenia niż na pierwszy rzut oka wydaje się. Po opanowaniu go dostaniesz potężne narzędzie, które pozwoli ci rozmieścić wszystkie elementy strony we właściwych miejscach. Aby jednak osiągnąć ten wynik, trzeba znać wszystkie istniejące znaczenia, ponieważ zasady ich działania różnią się znacznie

Specyfika budowania przepływu dokumentu

CSS pozycji działa wraz z przepływem strony internetowej. Jak to zrozumieć? Domyślnie wszystkie elementy strony są ułożone w kolejności, w jakiej zostały utworzone w znacznikach HTML. Jeśli nagłówek tagu znajduje się nad tagiem stopki, strona zostanie wyświetlona powyżej. I odwrotnie, jeśli w jakiś sposób zdecydujesz się umieścić stopkę w html nad "hostem", "piwnica" strony będzie wyświetlana nad "kapeluszem". W tym przypadku elementy blokowe zajmują całą dostępną dla nich szerokość. Liniowy z kolei jest ułożony w jedną linię, dopóki nie weźmie wszystkiego, a następnie zaczyna być przenoszony na nowy. Ta kolejność nazywa się przepływem dokumentu. "


Aby zmienić zachowanie przepływu, użyj właściwości Position w CSS. Może również ulec zmianie ze względu na właściwości zmiennoprzecinkowe, ale nie będziemy go uwzględniać. Za pomocą pozycjonowania można wymusić "wypadnięcie" elementu ze zwykłego strumienia, po którym zacznie się zachowywać w nowy sposób. Jak dokładnie - zależy od wartości użytej nieruchomości.

Pozycja CSS: static

Position: static lub static positioning, jest domyślną wartością dla wszystkich utworzonych bloków HTML. W normalnych okolicznościach nie musisz sobie z tym radzić. Jeśli dla dowolnego bloku lub linii nie określono żadnej pozycji, to ma ona wartość statyczną. Na stronie ten składnik jest wyświetlany zgodnie ze strumieniem. Jeśli określisz właściwości prawy /lewy lub górny /dolny, nie będzie efektu.


CSS Pozycja: fixed

Podczas korzystania z tej właściwości, element znajduje się poza normalnym przepływem dokumentu. Teraz jego pozycja jest obliczana względem okna przeglądarki, bez względu na to, jak są umieszczane inne komponenty. Innymi słowy, Position: fixed block przejdzie na górę strony, zwiąże się z krawędzią okna przeglądarki, a pozostałe elementy zostaną umieszczone zgodnie ze strumieniem.
Główną cechą elementów o stałej pozycji jest to, że mogą nakładać się na inne bloki i łańcuchy stron. Podczas przewijania bloku za pomocą Position: fixed wydaje się, że pozostaje na swoim miejscu, nie znikając z ekranu. Jest to przydatne, jeśli potrzebujesz nawigacji lub podobnego elementu, do którego użytkownik musi zawsze mieć dostęp. Poprawiono pozycjonowanie, jeśli chcesz umieścić przycisk szybkiego przewijania na określonej części strony.

Pozycja CSS: relative

Użycie tej właściwości nazywa się pozycjonowaniem względnym. Jeśli ustawisz właściwość pozycji Pozycja: względna, tapozostanie na swoim miejscu. Na pierwszy rzut oka nic specjalnego się nie wydarzy, ale wszystko się zmieni, jeśli użyjesz właściwości prawa /lewa i góra /dół dodatkowo. Za ich pomocą możesz kontrolować ruch komponentu względem jego lokalizacji. W miejscu, gdzie wcześniej znajdował się blok lub linia, pojawi się pusta przestrzeń - pozostałe elementy pozostaną na swoich pozycjach, nie zwracając uwagi na pustą przestrzeń.
Przenoszenie komponentów nie wpływa na położenie otaczających części strony. Pozostaną na swoich miejscach, chociaż blok pozycjonowany może je zablokować. Sama w sobie własność jest rzadko używana. Zwykle jest używany w połączeniu z następującą opcją.

Absolutne pozycjonowanie

Jeden z najciekawszych i najczęściej używanych wariantów. W przypadku użycia właściwości Position z bezwzględną wartością komponentu komponent strony zostanie policzony w oknie przeglądarki. Inne elementy (nieumiejętnie pozycjonowane), jakby "zapomniały" o istnieniu "siostry" z pozycją: bezwzględne i zajmują jej miejsce w strumieniu. Wydaje się, że wszystko jest dokładnie takie samo jak w przypadku Position: fixed, ale istnieją poważne różnice.
Przede wszystkim pozycja elementu może być swobodnie kontrolowana - w tym celu wykorzystywać właściwości górnej /prawej /dolnej /lewej. Na przykład, jeśli ustawisz dolną wartość na: 100px, blok będzie "stać" z dołu strony o 100 pikseli. Po drugie, gdy przewijanie jest elementem "absolutnym"pozostanie na miejscu zamiast nawigować po stronie.

Współdziałanie bloków bezwzględnych z elementami rodzicielskimi

Możliwe jest uzyskanie jeszcze dokładniejszej kontroli nad składnikiem absolutnie pozycjonującym. Aby to zrobić, musisz ustawić właściwość jego ojca Pozycja: stała, względna lub absolutna. Rozważ przykład. Masz element div z klasą relative-div, wewnątrz której znajduje się klasa div z klasą div-div. Ustawiliśmy wewnętrzny blok na Position: absolute. Natychmiast "wylatuje" ze strumienia i pojawia się gdzieś wyżej, ponieważ teraz jego lokalizacja jest obliczana w odniesieniu do okna przeglądarki. Teraz ustawiamy blok z klasą względnej div Pozycja: względna, a "syn marnotrawny" wraca do miejsca. Prawie W rzeczywistości pojawia się w lewym górnym rogu elementu nadrzędnego.
Dlaczego tak się dzieje? Przypadek w szczegółach stanowiska: własność absolutna. Domyślnie jego stan zależy od przeglądarki, ale jeśli "nadrzędny" jest również umieszczony gdzieś poza statycznym, pozycja zaczyna się zależeć od elementu nadrzędnego. Jest to bardzo wygodne, ponieważ możesz umieścić komponent w dowolnym miejscu, bez liczenia wielkich liczb w oknie przeglądarki. Odbiór jest często używany do umieszczania ikon, przycisków i innych małych przedmiotów.

Pozycja CSS w centrum

Jedną z głównych trudności dla początkujących jest centrowanie elementu w pionie i poziomie. Właściwe używanie właściwości Position ułatwia to zadanie. Pozycja CSS: bezwzględna w centrumustawia się w następujący sposób. Na przykład, załóżmy, że masz d iv z klasą div-div, która jest w boskiej klasie relative-div. "Ojciec" jest pozycjonowany względem szerokości równej szerokości całej strony. "Potomek" ma szerokość i wysokość 400 pikseli, pozycjonowanie absolutne i domyślnie znajduje się w lewym górnym rogu elementu nadrzędnego.
Wszystko, co musisz zrobić, to ustawić bezwzględny najwyższy komponent: 50% i lewo: 50%. Prawie gotowe! Absolute-div przesunął się z miejsca i znalazł się prawie w centrum, ale wcale nie. Środek "ojca" odnosi się do jego regionu, a my musimy wyśrodkować centrum "potomka" w centrum bloku. Aby to zrobić, musisz ustawić margines lewy i margines prawy z wartościami -200 px. W ten sposób przesuniemy blok pozycjonowany absolutnie o połowę jego wysokości i szerokości. Wszystko, co on jest w centrum!

Pokrywanie się komponentów

Problem może być skomplikowany, na pierwszy rzut oka, "pozycjonujące" elementy pozycjonujące na swoich "sąsiadach". Na przykład komponent Pozycja: naprawiony pokryje wszystko, co znajduje się na stronie. Możesz naprawić sytuację za pomocą właściwości z-index, ale pamiętaj, że działa ona tylko dla pozycji pozycjonowanych. Odpowiednio, jeśli chcesz umieścić blok nad pozycją o ustalonej pozycji, ten blok będzie musiał również ustawić pozycjonowanie. Na przykład względny. Najlepszym sposobem na opanowanie pozycjonowania jest obejrzenie przykładów pozycji CSS, eksperymentowanie i wypróbowanie czegoś we własnym zakresie. Spróbuj się uczyćużywaj go w połączeniu z funkcją calc () - pozwoli to na bardziej elastyczną konfigurację lokalizacji. Należy jednak pamiętać, że ta właściwość nie ma na celu zbudowania całej siatki stron. Użyj go, aby przenieść względnie małe elementy, w przeciwnym razie bardzo łatwo będzie się pomylić.

Powiązane publikacje