Element blokowy w HTML to taki, który domyślnie obejmuje całą szerokość elementu nadrzędnego. Element nadrzędny może być innym elementem bloku lub oknem przeglądarki. Element blokowy można ustawić na szerokość i wysokość za pomocą właściwości CSS. Pozycjonowanie elementów blokowych to proces umieszczania ich w oknie przeglądarki i względem siebie za pomocą właściwości CSS position, left, top, right i bottom. Właściwość pozycji CSS służy do ustawiania jednego z czterech dostępnych typów pozycjonowania: statycznego (domyślnego), bezwzględnego, stałego i względnego. Pozostałe właściwości CSS, czyli left, top, right i bottom, służą do ustawiania odległości względem lewej, górnej, prawej i dolnej części elementu nadrzędnego. Ponadto elementy blokowe podczas ustawiania niektórych właściwości mogą na siebie nakładać się, a ta funkcja może być używana w witrynach.
Domyślne pozycjonowanie (statyczne)
Jeśli nie określisz położenia na elemencie bloku lub określisz statyczny, który jest taki sam, elementy blokowe zostaną ułożone w kolejności. Ponadto następny blok (np. Czerwony) znajduje się na nowej linii. Na podane położenie nie ma również wpływu ustawienie odległości od lewej, od góry, od prawej i od dołu.
Absolutne pozycjonowanie
W przypadku pozycjonowania bezwzględnego położenie elementu jest ustawiane względem krawędzi okna przeglądarki przy użyciu odległości podanych we właściwościach left, top, right i bottom. Jeśli jednocześnie określisz odległości lewą i prawą, a będą one ze sobą sprzeczne, to preferowana jest lewa, to samo dotyczy góry i dołu, w których pierwszeństwo ma odległość od góry. Pozycjonowanie bezwzględne jest bardzo często używane w połączeniu z pozycjonowaniem względnym do celów projektowych, gdy konieczne jest umieszczenie różnych elementów względem siebie, można go również wykorzystać do tworzenia menu rozwijanych, układu strony itp.
Naprawiono pozycjonowanie
Ustalone pozycjonowanie różni się od innych typów pozycjonowania i nie przesuwa się wraz z treścią podczas przewijania strony. Elementy blokowe o stałej pozycji są przyciągane do krawędzi okna przeglądarki przy użyciu właściwości left, top, right i bottom. Stałe pozycjonowanie służy do tworzenia interfejsów w ramkach (okno przeglądarki jest podzielone na kilka obszarów), stałego menu, stałej stopki strony oraz bloków „stałych” (lista linków, przyciski społecznościowe itp.).
Względne pozycjonowanie
Względne pozycjonowanie jest określane przez określenie odległości od lewej, góry, prawej i dołu w stosunku do jego aktualnej pozycji.
Jednak takie położenie bloku można również utworzyć za pomocą właściwości margin.
Pozycjonowanie względne samo w sobie nie jest przyjemne, najczęściej jest używane w połączeniu z pozycjonowaniem bezwzględnym.
Rozważ opcje:
Pozycjonowanie jest jedną z kluczowych koncepcji w układzie blokowym. Poradziwszy sobie z tym, dużo zrozumiesz, a układ szamanizmu zamieni się w znaczący proces. Dlatego w tym artykule skupimy się na właściwościach CSS. pozycja i pływak.
1. pozycja: statyczna
Domyślnie wszystkie elementy na stronie są pozycjonowane statycznie (pozycja: statyczna), co oznacza, że \u200b\u200belement nie jest pozycjonowany i pojawia się w dokumencie w swoim zwykłym miejscu, czyli w takiej samej kolejności jak w znaczniku html.
Nie ma potrzeby specjalnego przypisywania tej właściwości do żadnego elementu, chyba że musisz zmienić wcześniej ustawione położenie na domyślne.
#content (pozycja: statyczna;)
2. pozycja: względna
Położenie: względne umożliwia użycie właściwości top, bottom, left i right w celu ustawienia elementu względem miejsca, w którym pojawiłby się w normalnym pozycjonowaniu.
Przesuńmy #content o 20 pikseli w dół i 40 pikseli w lewo:
#content (pozycja: względna; góra: 20px; lewa: -40px;)
Zauważ, że jest teraz puste miejsce w miejscu, w którym powinien znajdować się nasz blok #content. Po bloku #content blok #footer nie przesunął się w dół, ponieważ #content nadal ma miejsce w dokumencie, mimo że go przenieśliśmy.
Na tym etapie może się wydawać, że pozycjonowanie względne nie jest tak przydatne, ale nie spiesz się z wnioskami, w dalszej części artykułu dowiesz się, do czego można je wykorzystać.
3. pozycja: absolutna
W przypadku pozycjonowania bezwzględnego (pozycja: bezwzględna) element jest usuwany z dokumentu i pojawia się tam, gdzie go polecisz.
Na przykład przenieśmy blok # div-1a w prawy górny róg strony:
# div-1a (pozycja: bezwzględna; góra: 0; po prawej: 0; szerokość: 200px;)
Zauważ, że tym razem, ponieważ blok # div-1a został usunięty z dokumentu, pozostałe elementy na stronie zostały ustawione inaczej: # div-1b, # div-1c i #footer przesunęły się do miejsca, w którym znajdował się usunięty blok. A sam blok # div-1a znajduje się dokładnie w prawym górnym rogu strony.
W ten sposób możemy pozycjonować dowolny element względem strony, ale to nie wystarczy. W rzeczywistości musimy ustawić # div-1a względem bloku macierzystego #content. W tym momencie ponownie pojawia się pozycjonowanie względne.
4. pozycja: stała
Ustalone pozycjonowanie (pozycja: ustalona) jest sekcją pozycjonowania bezwzględnego. Jedyną różnicą jest to, że zawsze znajduje się w widocznym obszarze ekranu i nie przesuwa się podczas przewijania strony. Pod tym względem wygląda trochę jak stały obraz tła.
# div-1a (pozycja: stała; góra: 0; prawa: 0; szerokość: 200px;)
W IE z pozycją: fixed, nie wszystko jest tak gładkie, jak byśmy chcieli, ale jest wiele sposobów ominąć te ograniczenia.
5. pozycja: względna + pozycja: bezwzględna
Przypisując pozycjonowanie względne (position: względne) do bloku #content, możemy pozycjonować dowolne elementy potomne względem jego granic. Umieśćmy blok # div-1a w prawym górnym rogu bloku #content.
#content (pozycja: względna;) # div-1a (pozycja: bezwzględna; góra: 0; po prawej: 0; szerokość: 200px;)
6. Dwie kolumny
Uzbrojeni w wiedzę z poprzednich kroków możesz spróbować utworzyć dwie kolumny, używając pozycjonowania względnego i bezwzględnego.
#content (pozycja: względna;) # div-1a (pozycja: bezwzględna; góra: 0; prawy: 0; szerokość: 200px;) # div-1b (pozycja: bezwzględna; góra: 0; lewa: 0; szerokość: 200px ;)
Jedną z zalet pozycjonowania bezwzględnego jest możliwość umieszczania elementów w dowolnej kolejności, niezależnie od tego, jak są one umieszczone w znaczniku. W powyższym przykładzie blok # div-1b jest umieszczony przed blokiem # div-1a.
A teraz powinieneś mieć pytanie: „Gdzie poszły pozostałe elementy z naszego przykładu?” Ukryli się pod absolutnie położonymi blokami. Na szczęście jest sposób, aby to naprawić.
7. Dwie kolumny o stałej wysokości
Jednym z rozwiązań jest ustawienie kontenera zawierającego kolumny na stałą wysokość.
#content (pozycja: względna; wysokość: 450px;) # div-1a (pozycja: bezwzględna; góra: 0; prawa: 0; szerokość: 200px;) # div-1b (pozycja: bezwzględna; góra: 0; lewa: 0 ; szerokość: 200px;)
Rozwiązanie nie jest zbyt trafne, ponieważ nigdy nie wiemy z góry, jakiego rozmiaru tekst zostanie umieszczony w kolumnach i jakiej czcionki zostanie użyty.
8. Pływak
W przypadku kolumn o zmiennych wysokościach pozycjonowanie bezwzględne nie jest odpowiednie, więc spójrzmy na inną opcję.
Przypisując element zmiennoprzecinkowy do bloku, przesuniemy go maksymalnie do prawej (lub lewej) krawędzi, a tekst następujący po bloku zostanie zawinięty wokół niego. Jest to zwykle używane do zdjęć, ale użyjemy go do bardziej złożonego zadania, ponieważ jest to jedyne narzędzie, które mamy do dyspozycji.
# div-1a (float: left; width: 200px;)
9. Głośniki „pływające”
Jeśli przypiszemy float: left do pierwszego bloku, a następnie float: left do drugiego, każdy z bloków będzie się przytulał do lewej i otrzymamy dwie kolumny o różnych wysokościach.
# div-1a (float: left; width: 150px;) # div-1b (float: left; width: 150px;)
Możesz również przypisać przeciwną wartość zmiennoprzecinkową do kolumn, w tym przypadku zostaną one rozmieszczone wzdłuż krawędzi kontenera.
# div-1a (float: right; width: 150px;) # div-1b (float: left; width: 150px;)
Ale teraz mamy inny problem - kolumny wychodzą poza kontener nadrzędny, psując tym samym cały układ. Jest to najczęstszy problem dla początkujących projektantów układu, chociaż można go rozwiązać w dość prosty sposób.
10. Pływak rozliczeniowy
Czyszczenie pływaka można przeprowadzić na dwa sposoby. Jeśli po kolumnach znajduje się kolejny blok, po prostu przypisz go wyraźnym: oba.
# div-1a (float: left; width: 190px;) # div-1b (float: left; width: 190px;) # div-1c (clear: both;)
Lub przypisz właściwość overflow: hidden do kontenera nadrzędnego
#content (przepełnienie: ukryte;)
Tak czy inaczej, wynik będzie taki sam.
Wniosek
Dzisiaj rozważano tylko podstawowe techniki pozycjonowania i najprostsze przykłady. Poza tym, aby pomóc początkującym projektantom layoutu, zawsze polecam serię artykułów Ivana Sagalaeva, które kiedyś bardzo mi pomogły.
Niezwykła lokalizacja!
Zdecyduj, który element ma być wyświetlany z przodu!
Elementy mogą się nakładać!
Pozycjonowanie
Właściwości pozycjonowania CSS pozwalają na pozycjonowanie elementu. Mogą również ustawić element za drugim i wskazać, co powinno się stać, gdy zawartość elementu jest zbyt duża.
Elementy można pozycjonować za pomocą właściwości top (góra), dół (dół), left (left) i right (right). Jednak te właściwości nie będą działać, dopóki właściwość position nie zostanie ustawiona. Działają też inaczej w zależności od metody pozycjonowania.
Istnieją cztery różne metody pozycjonowania.
Pozycjonowanie statyczne
Elementy HTML są domyślnie pozycjonowane statycznie. Element pozycjonowany statycznie jest zawsze pozycjonowany zgodnie ze standardowym przepływem elementów na stronie.
Na elementy pozycjonowane statycznie nie mają wpływu właściwości top, bottom, left i right.
Naprawiono pozycjonowanie
Element o stałej pozycji jest pozycjonowany względem okna przeglądarki.
Nie porusza się, nawet jeśli okno jest przewijane:
Komentarz: IE7 i IE8 obsługują stałą wartość tylko wtedy, gdy określono! DOCTYPE.
Naprawione elementy są usuwane z normalnego przepływu. Dokument i inne elementy zachowują się tak, jakby stały element nie istniał.
Zablokowane elementy mogą nakładać się na inne elementy.
Względne pozycjonowanie
Względnie umieszczony element jest ustawiony względem swojego normalnego położenia.
Elementy pozycjonowane względnie są często używane jako pojemniki na elementy pozycjonowane bezwzględnie.
Pozycjonowanie bezwzględne
Element pozycjonowany absolutnie jest pozycjonowany względem swojego pierwszego elementu nadrzędnego, który jest ustawiony inaczej niż statycznie. Jeśli nie zostanie znaleziony taki element, rodzic jest traktowany jako :
Pozycje pozycjonowane bezwzględnie są usuwane ze standardowego przepływu towarów. Dokument i inne elementy zachowują się tak, jakby element pozycjonowany absolutnie nie istniał.
Elementy pozycjonowane absolutnie mogą nakładać się na inne elementy.
Nakładające się elementy
Gdy elementy są poza standardowym przepływem, mogą nakładać się na inne elementy.
Właściwość z-index określa pionową kolejność elementu (który element powinien być umieszczony przed, czy za innymi elementami).
Element może mieć dodatnią lub ujemną kolejność pionową:
Pozycja o większej kolejności pionowej zawsze znajduje się przed pozycjami o mniejszej kolejności pionowej.
Komentarz: Jeśli dwa pozycjonowane elementy nachodzą na siebie i nie określono kolejności pionowej, element znajdujący się później w kodzie HTML zostanie wyświetlony na górze.
Więcej przykładów |
Ustalenie kształtu elementu
W tym przykładzie pokazano, jak ustawić kształt elementu. Element jest przycinany do tego kształtu, a następnie wyświetlany.
Jak wyświetlić przepełniony element za pomocą przewijania
W tym przykładzie pokazano, jak ustawić właściwość przepełnienia, aby utworzyć pasek przewijania, gdy zawartość elementu jest zbyt duża, aby zmieścić się w określonym obszarze.
Jak sprawić, by przeglądarka automatycznie obsługiwała przepełnienie
W tym przykładzie pokazano, jak zmusić przeglądarkę do automatycznej obsługi przepełnienia.
Zmiana kursora
Ten przykład pokazuje, jak zmienić kursor.
Wszystkie właściwości pozycjonowania CSS
Liczba w kolumnie „CSS” wskazuje, w której wersji CSS właściwość jest zdefiniowana w (CSS1 lub CSS2).
| własność | Opis | Wartości | CSS |
|---|---|---|---|
W język HTML wszystkie elementy można podzielić na blokowe i inline. Elementy blokowe są zwykle przedstawiane jako prostokątne obszary z pewnymi informacjami. Z ich pomocą budowana jest siatka stron. Takie elementy zajmują całą dostępną dla nich przestrzeń na szerokość, a przed nimi i za nimi zazwyczaj występuje przerwa w linii. Bloki można ustawić na wcięcia, wymiary poziome i pionowe.
Cechy elementów blokowych
Tagi bloków obejmują tagi, które wyróżniają dużą liczbę informacje tekstowe:
