Pozycjonowanie pozwala usunąć elementy z normalnego przepływu układu dokumentu i sprawić, by zachowywały się inaczej; na przykład układać się jeden na drugim lub zawsze pozostawać w tym samym miejscu w rzutni. W tym artykule wyjaśniono różne wartości „position” i jak z nich korzystać.
Wprowadzenie do pozycjonowania
Cała idea pozycjonowania polega na umożliwieniu nam przedefiniowania zachowania podstawowego przepływu dokumentu opisanego powyżej w celu uzyskania interesujących efektów. Co się stanie, jeśli chcesz nieznacznie zmienić pozycję dowolnych bloków w układzie w stosunku do ich pozycji w domyślnym strumieniu układu? Twoim narzędziem jest pozycjonowanie. Lub jeśli chcesz utworzyć element interfejsu użytkownika, który unosi się nad innymi częściami strony i zawsze znajduje się w tym samym miejscu w oknie przeglądarki, niezależnie od tego, ile przewija się strona? Pozycjonowanie umożliwia pracę takich układów.
Istnieje kilka różnych rodzajów pozycjonowania, które można zastosować do elementów HTML. Aby aktywować określony typ pozycjonowania elementu, używamy właściwości „position”.
Na czym polega pozycjonowanie strony internetowej? Pozycjonowanie statyczne
Pozycjonowanie statyczne to ustawienie domyślne, które otrzymuje każdy element, co oznacza po prostu”umieszczenie elementu w jego normalnej pozycji w przepływie układu dokumentu — nic specjalnego do rozważenia”.
Aby to zademonstrować i dostosować próbkę do przyszłych sekcji, najpierw dodaj class positioned do drugiego < p> w HTML:
…
A teraz dodaj następującą regułę na końcu CSS:
.positioned {
position: static;
background: yellow;
}
A jeśli teraz zapiszesz i zaktualizujesz, nie zobaczysz żadnych zmian, nie licząc zaktualizowanego koloru tła akapitu 2. W porządku, jak powiedzieliśmy wcześniej, pozycjonowanie statyczne jest domyślnym zachowaniem!
Weźmy jakiś element strony i rozważmy go. Nie ma znaczenia, czy jest to fragment tekstu, obraz, film czy formant ActiveX. Z punktu widzenia przeglądarki internetowej wszystkie są takie same (oczywiście do znanego limitu). Nie ma znaczenia, czy dany element strony zostanie umieszczony w głównym „strumieniu” tekstu, renderowany w ramce lub „wciśnięty” w komórkę tabeli. Zarówno pierwsza, jak i druga, i trzecia metoda nie pozwalają naprawdę „uwolnić” elementu strony, a jedynie stworzyć pozór tej wolności.
Otwórz wcześniej utworzoną stronę i wybierz dowolny jej element. Co to jest? Część zawartości tej strony. Jego rozmiar jest kontrolowany przez przeglądarkę internetową na podstawie wymiarów jej rodzica, innymi słowy, na wielkości wolnej przestrzeni, którą można dla niego przydzielić. Podobnie jest z pozycjonowaniem elementu strony — zależy to od wielkości i lokalizacji jego „sąsiadów” i jego rodzica. A one z kolei zależą od wielkości okna przeglądarki internetowej. Jak widać, nie ma sposobu, aby dokładnie kontrolować wymiary i współrzędne elementu strony — wszystkie te parametry zależą od wielu czynników, których nie można wykluczyć w zwykły sposób.
Oczywiście projektanci stron internetowych próbują w jakiś sposób ograniczyć działanie tych czynników. Formatują strony za pomocą tabel znaczników, dzięki czemu uzyskują pełniejszą kontrolę nad parametrami poszczególnych elementów strony. Są to jednak tylko fikcje, na które, jak mówią, Gol jest przebiegły. Każdy element strony i tak zależy od swoich „sąsiadów”.
Pozycjonowanie stron internetowych
Pozycjonowanie jest pierwszym rodzajem pozycji, którą rozważymy. Jest bardzo podobny do pozycjonowania statycznego, z tym wyjątkiem, że można zmodyfikować ostateczną pozycję pozycjonowanego obiektu, który zajął jego miejsce w układzie normalnego przepływu, w tym zmusić go do nakładania się na inne elementy na stronie. Przejdź dalej i zaktualizuj deklarację position w swoim kodzie:
position: relative;
Jeśli zapiszesz i zaktualizujesz na tym etapie, w rezultacie nie zobaczysz żadnych zmian. Jak więc zmodyfikować pozycję? Musisz użyć właściwości top, bottom, left (en-US) I right które wyjaśnimy w następnej sekcji.
Wprowadzenie do top, bottom, left, I right
Top, bottom, left (en-US) I right są używane razem z position, aby wskazać, gdzie dokładnie przenieść pozycjonowany element. Aby spróbować, dodaj następującą deklarację do reguły .positioned w Twoim CSS:
top: 30px;
left: 30px;
Pozycjonowanie bezwzględne
Pozycjonowanie absolutne daje zupełnie inne wyniki. Spróbujmy zmienić deklarację pozycji w kodzie jak poniżej:
position: absolute;
Przede wszystkim należy pamiętać, że odstępy gdzie pozycja powinna być pozycjonowana w strumieniu dokumentu jest teraz nieobecny — pierwszy i trzeci element zbliżył się tak, jakby już nie istnieje! Cóż, w pewnym sensie to prawda. Absolutnie pozycjonowany element nie istnieje już w normalnym przepływie układu dokumentu. Zamiast tego znajduje się na własnej warstwie oddzielnie od wszystkiego innego. Jest to bardzo przydatne: oznacza to, że możemy tworzyć izolowane funkcje interfejsu użytkownika, które nie wpływają na układ innych elementów strony. Na przykład wyskakujące bloki informacyjne i menu sterowania; przewrócone panele; funkcje interfejsu użytkownika, które można przeciągać i upuszczać w dowolnym miejscu na stronie; i tak dalej…
