Element blokowy w HTML to element, który domyślnie zajmuje całą szerokość swojego elementu nadrzędnego. Elementem nadrzędnym może być inny element blokowy lub okno przeglądarki. Możesz ustawić szerokość i wysokość elementu blokowego za pomocą właściwości CSS. Pozycjonowanie elementów blokowych to proces umieszczania ich w oknie przeglądarki i względem nich przy użyciu właściwości CSS position, left, top, Right i Bottom. Właściwość CSS position ma na celu ustawienie jednego z czterech dostępnych typów pozycjonowania: statycznego (domyślnego), absolutnego, 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 krawędzi elementu nadrzędnego. Ponadto elementy blokowe mogą nakładać się na siebie podczas ustawiania pewnych właściwości i ta okazja tego samego można używać na stronach internetowych.
Domyślne pozycjonowanie (statyczne)
Jeżeli nie określiłeś pozycji elementu blokowego lub podałeś static , co jest tym samym, wówczas elementy blokowe zostaną ułożone w odpowiedniej kolejności. Co więcej, następny blok (na przykład: czerwony) znajduje się w nowej linii. Ponadto na to pozycjonowanie nie ma wpływu ustawienie odległości lewy, górny, prawy i dolny.
Pozycjonowanie absolutne (absolutne)
W przypadku pozycjonowania bezwzględnego położenie elementu jest określane względem krawędzi okna przeglądarki przy użyciu odległości określonych przez właściwości left , top , Right i Bottom . Jeśli jednocześnie określisz odległości lewy i prawy, a będą one ze sobą kolidowały, wówczas preferowana będzie lewa, to samo dotyczy góry i dołu, gdzie odległość góra ma pierwszeństwo. Pozycjonowanie bezwzględne bardzo często wykorzystywane jest w połączeniu z pozycjonowaniem względnym na potrzeby projektowe, gdy konieczne jest rozmieszczenie różnych elementów względem siebie, można je również wykorzystać do tworzenia menu rozwijanych, układu strony itp.
Stałe pozycjonowanie
Pozycjonowanie stałe różni się od innych rodzajów pozycjonowania i nie przesuwa się wraz z treścią podczas przewijania strony. Elementy blokowe o stałej pozycji są zakotwiczone za pomocą właściwości left , top , Right i Bottom do krawędzi okna przeglądarki. Stałe pozycjonowanie służy do tworzenia interfejsów ramek (okno przeglądarki podzielone jest na kilka obszarów), stałego menu, stałej stopki witryny oraz „stałych” bloków (lista linków, przyciski społecznościowe itp.).
Pozycjonowanie względne
Pozycjonowanie względne jest określane poprzez określenie odległości od lewej, górnej, prawej i dolnej strony względem jego aktualnej pozycji.
Jednak tę pozycję bloku można również utworzyć za pomocą właściwości marginesu.
Samo pozycjonowanie względne nie jest zabawne, jest najczęściej używane w połączeniu z pozycjonowaniem bezwzględnym.
Rozważmy opcje:
Pozycjonowanie jest jednym z kluczowych pojęć w układzie blokowym. Kiedy to zrozumiesz, wiele stanie się dla ciebie jasne, a układ zmieni się z szamanizmu w znaczący proces. Dlatego ten artykuł skupi się na właściwościach CSS. pozycja I platforma.
1. pozycja: statyczna
Domyślnie wszystkie elementy na stronie mają pozycjonowanie statyczne (pozycja: static), co oznacza, że element nie jest pozycjonowany i pojawia się w dokumencie na swoim zwykłym miejscu, czyli w tej samej kolejności, co w znaczniku HTML.
Nie ma potrzeby przypisywania tej właściwości do żadnego elementu, chyba że zachodzi potrzeba zmiany wcześniej ustawionego położenia na domyślne.
#treść(pozycja: statyczna; )
2. pozycja: względna
Pozycjonowanie względne (pozycja: względna) umożliwia użycie właściwości top, Bottom, left i Right w celu ustawienia elementu względem miejsca, w którym mógłby się on pojawić, gdyby był ustawiony normalnie.
Przesuńmy #content 20 pikseli w dół i 40 pikseli w lewo:
#content( pozycja: względna; góra: 20 pikseli; lewa: -40 pikseli; )
Zauważ, że w miejscu, w którym znajdowałby się nasz blok #content, jest teraz puste miejsce. Po bloku #content blok #footer nie został przesunięty w dół, ponieważ #content nadal zajmuje swoje miejsce w dokumencie, mimo że go przenieśliśmy.
Na tym etapie może się wydawać, że pozycjonowanie względne nie jest zbyt 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 absolutnego (pozycja: absolutna) element zostanie usunięty z dokumentu i pojawi się tam, gdzie mu to wskażesz.
Przesuńmy na przykład blok #div-1a w prawy górny róg strony:
#div-1a ( pozycja:absolutna; góra:0; prawa:0; szerokość:200px; )
Zauważ, że tym razem w związku z usunięciem bloku #div-1a z dokumentu pozostałe elementy na stronie zostały rozmieszczone inaczej: #div-1b, #div-1c i #footer zostały przeniesione powyżej, w miejsce usuniętego bloku . 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 nadrzędnego bloku #content. W tym momencie ponownie wchodzi w grę pozycjonowanie względne.
4. pozycja: stała
Pozycjonowanie stałe (pozycja: stała) jest podsekcją 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 przypomina to trochę stały obraz tła.
#div-1a ( pozycja: stała; góra: 0; prawa: 0; szerokość: 200 pikseli; )
W IE z position:fixed nie wszystko idzie tak gładko jak byśmy chcieli, ale jednak jest wiele sposobów ominąć te ograniczenia.
5. pozycja: względna + pozycja: absolutna
Przypisując pozycję względną do bloku #content (pozycja: względna), możemy ustawić 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; prawa: 0; szerokość: 200 pikseli; )
6. Dwie kolumny
Uzbrojeni w wiedzę z poprzednich kroków, możesz spróbować utworzyć dwie kolumny, stosując pozycjonowanie względne i bezwzględne.
#content ( pozycja: względna; ) #div-1a ( pozycja: bezwzględna; góra: 0; prawa: 0; szerokość: 200 pikseli; ) #div-1b ( pozycja: bezwzględna; góra: 0; lewa: 0; szerokość: 200 pikseli ;)
Jedną z zalet pozycjonowania bezwzględnego jest możliwość umieszczenia elementów w dowolnej kolejności, niezależnie od tego, jak są one umiejscowione w znaczniku. W powyższym przykładzie blok #div-1b jest umieszczony przed blokiem #div-1a.
I teraz powinno pojawić się pytanie: „Gdzie się podziała reszta elementów z naszego przykładu?” Schowali się pod doskonale ustawionymi blokami. Na szczęście istnieje sposób, aby temu zaradzić.
7. Dwie kolumny o stałej wysokości
Jednym z rozwiązań jest nadanie stałej wysokości pojemnikowi zawierającemu kolumny.
#content ( pozycja: względna; wysokość: 450 pikseli; ) #div-1a ( pozycja: bezwzględna; góra: 0; prawa: 0; szerokość: 200 pikseli; ) #div-1b ( pozycja: bezwzględna; góra: 0; lewa: 0 ;szerokość:200px; )
Rozwiązanie nie jest zbyt odpowiednie, ponieważ nigdy nie wiemy z góry, jaki rozmiar tekstu będzie umieszczony w kolumnach i jaka czcionka zostanie użyta.
8. Unosić się
W przypadku kolumn o zmiennej wysokości pozycjonowanie bezwzględne nie wchodzi w grę, więc spójrzmy na inną opcję.
Przypisując blokowi float, dopychamy go maksymalnie do prawej (lub lewej) krawędzi, a tekst znajdujący się za blokiem będzie opływał go. Technikę tę stosuje się zwykle w przypadku zdjęć, jednak my użyjemy jej do bardziej złożonego zadania, gdyż jest to jedyne narzędzie, jakim dysponujemy.
#div-1a ( float:lewy; szerokość:200px; )
9. Głośniki „pływające”.
Jeśli do pierwszego bloku przypiszemy float: left, a następnie float: left do drugiego, to każdy blok zostanie przesunięty do lewej krawędzi i otrzymamy dwie kolumny o zmiennej wysokości.
#div-1a ( float:lewy; szerokość:150px; ) #div-1b ( float:lewy; szerokość:150px; )
Możesz także przypisać do kolumn przeciwną wartość zmiennoprzecinkową, w takim przypadku zostaną one rozmieszczone wzdłuż krawędzi kontenera.
#div-1a ( float:w prawo; szerokość:150px; ) #div-1b ( float:w lewo; szerokość:150px;)
Ale teraz mamy inny problem - kolumny wychodzą poza kontener nadrzędny, psując w ten sposób cały układ. Jest to najczęstszy problem początkujących projektantów układów, chociaż można go rozwiązać po prostu.
10. Pływak do czyszczenia
Czyszczenie pływaków można przeprowadzić na dwa sposoby. Jeśli po kolumnach znajduje się kolejny blok, wystarczy przypisać do niego clear: oba.
#div-1a ( float:left; szerokość:190px; ) #div-1b ( float:left; szerokość:190px; ) #div-1c ( clear:oba; )
Lub przypisz właściwość overflow:Hidden do kontenera nadrzędnego
#treść ( przepełnienie:ukryte; )
W każdym razie wynik będzie taki sam.
Wniosek
Dziś rozważano tylko podstawowe techniki pozycjonowania i to najczęściej proste przykłady. Ponadto, aby pomóc początkującym projektantom układów, zawsze polecam serię artykułów Iwana Sagalajewa, które kiedyś bardzo mi pomogły.
Niezwykła lokalizacja!
Zdecyduj, który element wyświetlić z przodu!
Elementy mogą na siebie nachodzić!
Pozycjonowanie
Właściwości pozycjonowania CSS umożliwiają pozycjonowanie elementu. Mogą także umieścić element za innym i określić, co powinno się stać, gdy zawartość elementu jest zbyt duża.
Elementy można pozycjonować za pomocą właściwości góra, dół, lewy i prawy. Jednakże te właściwości nie będą działać, jeśli nie zostanie ustawiona właściwość position. Działają również inaczej w zależności od metody pozycjonowania.
Istnieją cztery różne metody pozycjonowania.
Pozycjonowanie statyczne
Elementy HTML są domyślnie rozmieszczone statycznie. Element pozycjonowany statycznie jest zawsze pozycjonowany zgodnie ze standardowym przebiegiem elementów na stronie.
Właściwości góra, dół, lewy i prawy nie mają wpływu na elementy umieszczone statycznie.
Naprawiono pozycjonowanie
Element o ustalonej pozycji jest pozycjonowany względem okna przeglądarki.
Nie poruszy się nawet po przewinięciu okna:
Komentarz: IE7 i IE8 obsługują stałą wartość tylko wtedy, gdy określono typ dokumentu!DOCTYPE.
Elementy stałe są usuwane z normalnego przepływu. Dokument i inne elementy zachowują się tak, jakby stały element nie istniał.
Elementy stałe mogą nakładać się na inne elementy.
Pozycjonowanie względne
Element stosunkowo pozycjonowany jest pozycjonowany względem swojego normalnego położenia.
Elementy pozycjonowane względnie są często używane jako pojemniki na elementy pozycjonowane bezwzględnie.
Pozycjonowanie absolutne
Element pozycjonowany bezwzględnie jest pozycjonowany względem pierwszego elementu nadrzędnego, który jest pozycjonowany inaczej niż statycznie. Jeśli taki element nie zostanie znaleziony, za element nadrzędny przyjmuje się element nadrzędny :
Elementy pozycjonowane bezwzględnie są usuwane ze standardowego przepływu elementów. Dokument i inne elementy zachowują się tak, jakby element pozycjonowany bezwzględnie nie istniał.
Elementy umieszczone bezwzględnie mogą nakładać się na inne elementy.
Nakładające się elementy
Gdy elementy znajdują się poza standardowym przepływem, mogą nakładać się na inne elementy.
Właściwość z-index określa kolejność elementów w pionie (który element powinien być umieszczony przed lub za innymi elementami).
Element może mieć dodatni lub ujemny porządek pionowy:
Element o większym porządku pionowym zawsze znajduje się przed elementami o mniejszym porządku pionowym.
Komentarz: Jeżeli dwa pozycjonowane elementy nakładają się na siebie i nie określono kolejności pionowej, na górze zostanie wyświetlony element znajdujący się później w kodzie HTML.
Więcej przykładów |
Ustawianie kształtu elementu
Ten przykład pokazuje, jak zdefiniować kształt elementu. Element zostanie przycięty do tego kształtu, a następnie wyświetlony.
Jak wyświetlić przepełniony element za pomocą przewijania
Ten przykład pokazuje, jak ustawić właściwość overflow, aby utworzyć pasek przewijania, gdy zawartość elementu jest zbyt duża, aby zmieścić się w określonym obszarze.
Jak zmusić przeglądarkę do automatycznej obsługi przepełnienia
Ten przykład pokazuje, 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 zdefiniowana jest dana właściwość (CSS1 lub CSS2).
| Nieruchomość | 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 zawierające pewną ilość informacji. Za ich pomocą budowana jest siatka strony. Takie elementy zajmują całą dostępną dla nich przestrzeń na szerokość, a przed i po nich zwykle następuje podział wiersza. Blokom można nadać wcięcia, wymiary poziome i pionowe.
Cechy elementów blokowych
Tagi blokowe obejmują tagi, które podkreślają duża liczba informacje tekstowe:
