Pozycjonowanie CSS względem bloku. CSS - Pozycjonowanie elementów blokowych. Pozycjonowanie względem lewego górnego rogu przeglądarki

Ostatnia aktualizacja: 28.04.2016

CSS zapewnia możliwość pozycjonowania elementów, co oznacza, że ​​możemy umieścić element w określonym miejscu na stronie.

Główną właściwością kontrolującą pozycjonowanie w CSS jest właściwość position. Ta właściwość może przyjmować jedną z następujących wartości:

static : standardowe położenie elementu, wartość domyślna

bezwzględny : element jest pozycjonowany względem granic elementu kontenera, jeśli jego właściwość position nie jest statyczna

względne : Element jest pozycjonowany względem swojej domyślnej pozycji. Zazwyczaj głównym celem pozycjonowania względnego nie jest przesunięcie elementu, ale ustalenie nowego punktu kontrolnego dla bezwzględnego pozycjonowania jego zagnieżdżonych elementów

fix : element jest pozycjonowany względem okna przeglądarki, pozwala to na tworzenie stałych elementów, które nie zmieniają położenia podczas przewijania

Nie należy jednocześnie stosować właściwości float i żadnego typu pozycjonowania innego niż statyczny (czyli typ domyślny) do elementu.

Absolutne pozycjonowanie

Obszar wyświetlania przeglądarki ma górną, dolną, prawą i lewą krawędź. Każda z tych czterech krawędzi ma odpowiednią właściwość CSS: lewa, prawa, górna i dolna. Wartości tych właściwości są określone w pikselach, emach lub procentach. Nie jest konieczne ustawianie wartości dla wszystkich czterech stron. Z reguły ustawiane są tylko dwie wartości - wcięcie od górnej krawędzi górnej i wcięcie od lewej krawędzi lewej.

WITAJ ŚWIECIE

Tutaj absolutnie pozycjonowany div będzie znajdował się 100 pikseli na lewo od krawędzi rzutni i 50 pikseli od dołu.

Nie jest tak istotne, aby po tym elemencie div znajdowały się jeszcze jakieś inne elementy. Ten blok div będzie w każdym przypadku umieszczony względem granic rzutni przeglądarki.

Jeżeli element z pozycjonowaniem bezwzględnym znajduje się w innym kontenerze, który z kolei ma wartość właściwości position różną od static , to element jest pozycjonowany względem granic kontenera:

Pozycjonowanie względne

Pozycjonowanie względne jest również określane przy użyciu wartości względnej. Aby określić konkretną pozycję, do której element zostanie przesunięty, używane są te same właściwości góra, lewo, prawo i dół:

właściwość indeksu Z

Domyślnie, gdy dwa elementy mają tę samą ramkę, element zdefiniowany jako ostatni w znacznikach HTML jest wyświetlany nad drugim. Jednakże właściwość z-index umożliwia zmianę kolejności elementów podczas ich nakładania. Właściwość przyjmuje jako wartość liczbę. Elementy o większej wartości indeksu Z pojawią się na elementach o mniejszej wartości indeksu Z.

Na przykład:

Dodajmy teraz nową regułę do stylu bloku redBlock:

RedBlock(indeks Z: 100; pozycja: bezwzględna; góra: 20 pikseli; lewa: 50 pikseli; szerokość: 80 pikseli; wysokość: 80 pikseli; kolor tła: czerwony; )

Tutaj indeks z wynosi 100. Ale nie musi to być liczba 100. Ponieważ drugi blok ma niezdefiniowany indeks z i w rzeczywistości wynosi zero, dla redBlock możemy ustawić właściwość z-index na dowolną wartość większą niż zero.

I teraz pierwszy blok będzie nachodził na drugi, a nie odwrotnie, jak miało to miejsce na początku.

Często w praktyce musimy rozwiązać problem grupowania i wyrównywania treści za pomocą CSS. Dzisiaj przyjrzymy się głównym sposobom umieszczania elementów w poziomym rzędzie.

Materiał zawarty w tym artykule ma pomóc początkującym projektantom stron internetowych opanować techniki układu stron internetowych.

Co wybrać lub metody

Istnieje kilka sposobów ułożenia elementów konstrukcyjnych w rzędzie w płaszczyźnie poziomej. Najbardziej przydatne, z punktu widzenia praktycznego zastosowania, są:

• Metoda „pływająca”.
• Metoda „bloku wbudowanego”.
• Metoda tabelaryczna

Każdy z nich ma swoje zalety, zastosowania i wady. Przyjrzyjmy się im w kolejności.

„O przełom” czyli trochę teorii

Wszystkie elementy strukturalne HTML można podzielić na:

Wbudowany(wbudowany) – typ img, rozpiętość i tym podobne. Nie mamy możliwości zmiany ich tła i nadania im dowolnych wymiarów liniowych.

Blok– zajmujące całą szerokość bloku nadrzędnego, zawsze zaczynając od nowej linii – p, h, dz.

Wizualny przykład struktur inline i blokowych podano poniżej:

Metoda pływakowa

Jak już wiadomo (patrz wyżej), element blokowy umieszczany jest w nowej linii, niezależnie od określonej dla niego szerokości ( szerokość). Dlatego zmniejszenie rozmiaru poziomego div-Och, nie można budować bloków w rzędzie.

Najpopularniejszą (szczególnie wśród początkujących projektantów układów) metodą rozwiązania jest wykorzystanie właściwości platforma.

Właściwość CSS platforma zyskało dużą popularność i wartość praktyczną po przejściu z metody układu tabelarycznego na blokowy.

Pływak: lewy (prawy) przekształca element blokowy w element pływający, wyrównuje go do lewej (prawej) krawędzi bloku nadrzędnego i ustawia zawijanie tekstu i innych elementów w prawo (w lewo).

Na przykład utwórzmy cztery bloki, które należy umieścić w rzędzie:

< html> < head> < meta charset= "utf-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "style.css" /> < body> < div class = "bblock" >Budujemy < div class = "bblock" >poziomy < div class = "bblock" >wiersz < div class = "bblock" >od diw

Oraz zewnętrzny arkusz stylów o następującej zawartości:

div ( float: lewy; /*Ustaw opakowanie*/ wysokość linii: 120px; rozmiar czcionki: 40px; tło: odcienie błękitu; kolor biały; margines u góry: 60 pikseli; szerokość: 320px; /*Napraw szerokość bloku*/ }

Rezultatem są cztery bloki ułożone w poziomym rzędzie i wyrównane do lewej krawędzi bloku nadrzędnego:

Czasami w praktyce konieczne jest wyrównanie bloków do prawej krawędzi elementu macierzystego. Zmieńmy przepływ wokół bloków w poprzednim przykładzie:

pływak: prawo;

Zwróć uwagę na napisy znajdujące się w blokach. Na pierwszy rzut oka może się wydawać, że przykład zadziałał krzywo. Ale tak naprawdę przeglądarka przetworzyła kod poprawnie: przeczytała bloki od góry do dołu i zrobiła to, o co ją prosiliśmy - wyrównała je do prawej. Należy o tym pamiętać korzystając z nieruchomości pływak: prawda.

Aby przerwać dopływ elementów z określonego miejsca należy skorzystać z linii:

< div style= "clear: both;" >

W omówionym powyżej przykładzie odległość między blokami ustalamy za pomocą wcięcia prawy margines. Ale co zrobić, jeśli układając stronę, masz zadanie: ułożyć bloki w rzędzie, wyśrodkować je, a także mieć wcięcia tylko między nimi, ale nie na zewnątrz?

Algorytm działań jest następujący.

< div class = "wrap" > < div class = "bblock" >Budujemy < div class = "bblock" >poziomy < div class = "bblock" >wiersz < div class = "bblock" >od diw

Zawijanie (szerokość: 1310 pikseli; /*napraw szerokość opakowania*/ margines: 0 auto; /*wyśrodkuj*/ tło: ciemnoszary; wysokość: 120px; /*Ustaw wysokość opakowania*/) . bblock ( float: lewy; /*Ustaw opakowanie*/ wysokość linii: 120px; /*Wysokość linii + pion. centrowanie tekstu*/ rozmiar czcionki: 40px; tło: odcienie błękitu; kolor biały; szerokość: 320px; /*Napraw szerokość bloku*/ margines-prawy: 10px; wyrównanie tekstu: do środka; /*Wyśrodkuj tekst w poziomie*/) . wrap: ostatnie dziecko (margines-prawy: 0px; /*Usuń pole ostatniego elementu div*/ }

W rezultacie otrzymujemy następujący obraz:

Cóż, nie możesz wziąć pod uwagę wszystkich praktycznych sytuacji, więc przejdźmy do cech ogólnych.

Ważny!!!

Metoda „bloku wbudowanego”.

Zarówno elementy inline, jak i blokowe mają swoje zalety i wady w kontekście każdego konkretnego rozwiązywanego zadania. A gdyby połączyć ich zalety?

Poznaj najważniejszy punkt programu – nieruchomość wyświetlacz: blok inline.

wyświetlacz: blok inline generuje element blokowo-liniowy, który w zasadzie jest elementem liniowym, ale zachowuje właściwości bloku - pozwala na zmianę wymiarów liniowych, ustawienie marginesów, wcięć itp.

Element blokowo-liniowy ma następujące właściwości:

• Wysokość i szerokość bloku jest określana automatycznie na podstawie zawartości i wartości wypełnienia ( wyściółka)
• wysokość i szerokość bloku można ustawić na stałe
• Załamanie granic nie powoduje żadnego efektu.

Spójrzmy na przykład tworzenia prostego menu nawigacyjnego zawierającego obraz i link.

< div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Link do menu 1 jest dłuższy niż zwykle < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Link do menu 2 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Link do menu 3 < div class = "nav" > < p>< img src= "./vaden-pro-logo.png" alt= "" /> < p class = "string" >< a href= "#" >Link do menu 4

Nav (wyświetlacz: blok inline; /*Ustaw wyświetlanie linii blokowych*/ szerokość: 180px; /*ustaw szerokość bloku*/ tło: odcienie błękitu; ) . string (tekst-wyrównaj: środek; /*Wyrównaj tekst w poziomie*/ }

W rezultacie otrzymujemy następujące menu:

Jak widać wyszło trochę krzywo... Ale nie mamy zamiaru się denerwować, więc stosujemy właściwość CSS do naszych div wyrównanie w pionie(szczegóły poniżej):

wyrównanie w pionie: góra;

Nasz pasek nawigacyjny jest teraz wyrównany do górnej linii:

Oczywiście podany przykład jest prymitywny, ale jestem pewien, że na jego podstawie można stworzyć prawdziwe arcydzieło!!!

Ważny!!!

• W przypadku starszych wersji przeglądarki Firefox dodaj linię:
  

  display: - moz-inline-stack;

  
  i zawiń element w dodatkowe opakowanie div.
• IE 7 i wcześniejsze wersje - dodaj linie:
  

  powiększenie: 1 ; /*set hasLayout*/ * display: inline; /*gwiazdka – hack dla IE */ _wysokość: 250 pikseli; /*min-wysokość nie działa w IE6*/

• Zaznaczam, że określone przeglądarki reagują selektywnie na te linie (Firefox na pierwszą, IE na resztę).

Metoda tabelaryczna

Podejście tabelaryczne od dawna jest standardem układu, przede wszystkim ze względu na prostotę i intuicyjność znaczników. Najprawdopodobniej właśnie to spowodowało pojawienie się formatowania tabeli w CSS.

Nieruchomości wyświetlacz: stół (komórka-stół, tabela inline), pozwalają na tabelaryczne formatowanie elementów bez użycia tabel HTML.

Aby umieścić bloki poziomo, potrzebujemy elementu nadrzędnego, który ma tę właściwość wyświetlacz: stół oraz elementy podrzędne (komórki) posiadające tę właściwość wyświetlacz: komórka-tabela:

< div class = "wrap" > < div class = "bblock" >Budujemy < div class = "bblock" >tabelaryczny < div class = "bblock" >wiersz < div class = "bblock" >od diw

Bblock (wyświetlanie: komórka tabeli; rozmiar czcionki: 32px; szerokość: 200px; wysokość: 200px; tło: złoto; wyrównanie tekstu: do środka; wyrównanie w pionie: środek;). wrap (wyświetlacz: stół; odstępy graniczne: 20px 20px; kolor tła: ciemnoszary; )

Ważny!!!

1. W przeciwieństwie do metod „Inline-block” i „float”, przy zmniejszaniu szerokości okna przeglądarki internetowej komórki nie przesuwają się w dół.
2. Nie masz możliwości ustawienia właściwości marginesu dla komórek pseudotabeli.
3. Kompatybilność między przeglądarkami. Właściwości z wyświetlacza: rodzina tabel* nie są obsługiwane przez IE6, IE7. Dodatkowo w IE8 możesz zobaczyć błąd dynamicznego renderowania elementów pseudotabelarycznych w postaci losowo brakujących komórek. Ten błąd pojawia się najczęściej podczas wstępnego rysowania dokumentu.

Wyobraź sobie, że twórca stron internetowych nie musi w ogóle myśleć o tym, jak wizualnie będzie wyglądać gotowa strona. Po prostu pisze kod, same elementy układają się na stronie od góry do dołu (blok) i od lewej do prawej (inline). Im wyżej w dokumencie jest zapisany kod, tym wyżej będzie on widoczny na stronie.

Generalnie zobaczymy naturalne zachowanie elementów i kolejność ich wyświetlania na stronie - przepływ dokumentu. Ale wcale nie jesteśmy zadowoleni z tej kolejności; chcemy umieścić logo w lewym górnym rogu, a przycisk nieco po prawej stronie. Potrzebujemy pełnej kontroli nad wszystkimi elementami, to my decydujemy gdzie i co będzie zlokalizowane. A do tego potrzebne jest narzędzie (właściwość), które zmienia normalne zachowanie elementów w przepływie. Co to za nieruchomość?

W CSS style nazywa się to pozycjonowaniem (pozycja), co może być zwyczajne (statyczny), względny (względny) i absolutne (absolutny).

Pozycjonowanie względne w CSS

Na względne położenie, blok przesuwa się względem swojego pierwotnego położenia. Jednak po zapisaniu do bloku:

Stanowisko: krewny;

nic się nie stanie, pozostanie na swoim miejscu. A układ współrzędnych przesuwa blok (góra, dół, lewo, prawo), zarówno z wartościami dodatnimi, jak i ujemnymi.

Jak to działa?

Wewnątrz żółtego bloku z klasą blokowo-żółty jest czerwony blok z klasą względem bloku. W normalnym przepływie czerwony blok zachodzi na żółty, ponieważ jest zapisany w kodzie jako ostatni.

Musimy przesunąć czerwony blok w dół o 10 pikseli. Można tego dokonać jedynie poprzez wymuszoną zmianę położenia czerwonego klocka. Tak to piszemy u góry: 10 pikseli, ale trzeba wskazać od czego te 10 pikseli mają być liczone?

Po zarejestrowaniu pozycja: względna, wyjaśniamy, że liczba jest względna w stosunku do jej aktualnej pozycji.

blokowo-żółty (
kolor tła: #ffe70f;
}

Względne blokowo (
pozycja: względna;
góra: 10px;
kolor tła: #ed5b77;
}

Na zdjęciu widzimy, jak czerwony blok przesunął się w dół o 10 pikseli w dół od pierwotnej pozycji.

Jeśli usuniesz go z kodu pozycja: względna, wówczas blok pozostanie na swoim miejscu. A co jeśli zamiast tego względny, pisać absolutny, to domyślnie te 10 pikseli będzie liczone od krawędzi okna przeglądarki i w rezultacie nasz blok, wręcz przeciwnie, podniesie się do góry, sięgając do dolnej krawędzi przeglądarki. A to nie było częścią naszych planów.

Pozycjonowanie bezwzględne w CSS

Na zdjęciu widać blok absolutnie ustawione, czyli wtedy, gdy układ współrzędnych liczony jest od krawędzi przeglądarki, zastępując tylko jedno słowo, zmieniliśmy położenie bloku.

Pozycja: absolutna;

Jest jedna osobliwość. Absolutne pozycjonowanie wpływa również na elementy wbudowane. Jeśli podano element inline pozycja: absolutna, wtedy będzie się zachowywał jak blok. Jest to analogiczne do własności - Blok wyświetlacza.

To nie wszystko, element „absolutny” znajdujący się wewnątrz „względnego” rodzica zmienia swój punkt odniesienia w postaci współrzędnych i zaczyna być pozycjonowany z dala od rodzica.

Blok z klasą blok-absolutny być wewnątrz rodzica blokowo-żółty.

blokowo-żółty (
pozycja: względna;
dopełnienie: 10px;
kolor tła: #ffe70f;
}

Ponieważ żółty blok ma względne położenie, a następnie czerwony blok z absolutne pozycjonowanie, przesuwa się względem czerwieni o określone piksele.

Blok-absolutny (
pozycja: absolutna;
dół: 10px;
po lewej: 10px;
kolor tła: #ed5b77;
}

Stałe pozycjonowanie

Podczas przewijania strony blok z pozycja: stała, pozostanie na miejscu, ta metoda jest zwykle używana do naprawienia paska nawigacyjnego.

indeks Z

Rozwiązuje kolejność nakładających się bloków „absolutnych”. Potrzebujemy, aby czerwony blok znajdował się na żółtym, a następnie wskazujemy indeks Z: 2 dla koloru czerwonego i indeks Z: 1 dla koloru żółtego.

Blokowo-czerwony (
pozycja: względna;
indeks Z: 2;
kolor tła: #ffe70f;
}

blokowo-żółty (
pozycja: absolutna;
góra: 20px;
indeks Z: 1;
kolor tła: #ed5b77;
}

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 jedynie podstawowe techniki pozycjonowania i najprostsze 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.

Od autora: Pozdrowienia. Pozycjonowanie elementów CSS to bardzo ważny temat przy budowie stron internetowych. W tym artykule proponuję przyjrzeć się temu bardziej szczegółowo, wszelkim sposobom przenoszenia bloków po stronie internetowej.

Jakie są typy

Jeśli mówimy o pozycjonowaniu elementów blokowych, ustawia się je za pomocą właściwości position. Ma cztery znaczenia i każde zasługuje na osobne rozważenie.

Absolutne pozycjonowanie

Jest to pierwszy znany gatunek. Ustawia się to w następujący sposób: pozycja: bezwzględna. Następnie blok traci swoje zwykłe właściwości i całkowicie wypada z normalnego przepływu. Co to za strumień? Spróbuj umieścić w swoim znaczniku kilka elementów blokowych w rzędzie. Jak się staną? Jeden po drugim i nie inaczej.

Domyślnie jest to normalne zachowanie bloków. Ale co dzieje się z blokiem, dla którego zdefiniowano pozycjonowanie bezwzględne? Całkowicie wypada z normalnego toku, inne bloki po prostu przestają go zauważać, jakby nigdy nie istniał, a element pozostaje na stronie. Pozycjonowanie bezwzględne w CSS jest często używane do precyzyjnego umieszczania elementów dekoracyjnych, ikon i innych elementów projektu.

Można go teraz przenosić za pomocą właściwości lewy, prawy, górny i dolny. Domyślnie ruch odbywa się względem krawędzi okna przeglądarki, ale jeśli element nadrzędny ma pozycję: wzgl., to ruch odbywa się względem bloku nadrzędnego.

Blok (pozycja: absolutna; dół: 0; prawo: 0; )

Blok ( pozycja: absolutna; dół: 0; po prawej: 0;

Element zostanie przeniesiony do prawego dolnego rogu. Zauważyłem, że często tak robią górny przycisk – po prostu umieszczają go absolutnie w samym rogu. Oto kolejny przykład, w którym najpierw pokażę możliwe znaczniki:

< div id = "wrapper" > < div class = "block" > < / div > < / div >

A teraz style css dla tego fragmentu:

#wrapper(pozycja: względna; ) .block( pozycja: bezwzględna; góra: 0; prawa: 10px; )

#obwoluta( pozycja: względna; Blok ( pozycja: absolutna; góra: 0; po prawej: 10 pikseli;

W tym przykładzie najpierw przypisaliśmy pozycjonowanie względne do kontenera nadrzędnego (względne - więcej o tym w dalszej części artykułu), a następnie ustawiliśmy pozycjonowanie bezwzględne dla tego samego elementu.block. W rezultacie współrzędne będą liczone nie z samego okna przeglądarki, ale z krawędzi elementu nadrzędnego, czyli bloku wrappera.

Względne pozycjonowanie elementów CSS

To kolejny typ i zapisuje się go tak – pozycja: względna. Współrzędne są określone przez te same właściwości, co dla pozycji bezwzględnej. Jedyną istotną różnicą jest to, że element formalnie nie wypada z przepływu – zostaje na niego miejsce.

Działanie tej wartości można porównać do widoczności: ukryte, gdy element jest ukryty na stronie, ale przestrzeń pod nim pozostaje nienaruszona. To samo dzieje się z rozmieszczeniem względnym - blok można przenieść w dowolne miejsce, ale miejsce na niego pozostaje puste i nie będzie zajmowane przez inne części.

Warto też wiedzieć, że przesunięcie nie następuje od krawędzi okna przeglądarki internetowej, ale od miejsca, w którym pierwotnie stała bryła. To jest:

Blok (pozycja: względna; góra: 10 pikseli; prawa: 50 pikseli; )

Blok ( pozycja: względna; góra: 10px; po prawej: 50 pikseli;

Blok przesunie się o 50 pikseli w prawo i 10 w lewo.

Fiksacja

Prawdopodobnie nie raz widziałeś na stronach internetowych, gdy podczas przewijania jakiś baner nie zniknął, ale nadal znajdował się w Twojej strefie widoczności, jakby przyklejony w jednym miejscu. Jest to realizowane głównie przy użyciu stałego pozycjonowania. Aby to zrobić, musisz napisać:

Pozycja: statyczna lub normalna pozycja statyczna

Ostatni typ jest statyczny, jest to normalne zachowanie elementów blokowych. Nie trzeba go określać, ponieważ jest on domyślny, ale nadal musisz wiedzieć o czwartej wartości. Czasami pozycja: static jest zapisywana w celu zastąpienia innego rodzaju pozycjonowania, gdy na stronie internetowej wystąpią określone zdarzenia.

Jak poprawnie ustawić bloki w css?

Omówiliśmy znaczenia, ale to nie wystarczy, aby dla siebie zamknąć ten temat. Właściwie musisz zrozumieć, gdzie i jakie rodzaje pozycjonowania należy zastosować. Podałem już przykład z fixem - można go użyć do tworzenia lepkich kolumn bocznych, nagłówków lub stopek.

Pozycjonowanie względne pomoże, gdy trzeba lekko przesunąć klocek względem jego położenia i jednocześnie utrzymać jego miejsce w przepływie. Blokom nadrzędnym przydzielono także możliwość stosowania ruchu bezwzględnego dla elementów potomnych.

Inne techniki: centrowanie, bloki pływające

Właściwość position nie rozwiązuje wszystkich problemów związanych z rozmieszczeniem elementów blokowych. Jak na przykład utworzyć przy jego użyciu siatkę witryny? Nie mam żadnych dobrych pomysłów. Tutaj z pomocą przychodzą inne nieruchomości.

Siatki są często tworzone przy użyciu elementów pływających w CSS. Właściwość umożliwia dociśnięcie bloku do lewej lub prawej krawędzi elementu nadrzędnego (float: w lewo, float: w prawo), umożliwiając ustawienie kilku elementów bloku w jednej linii, co jest powszechne w każdym serwisie.

Centrowanie odbywa się w następujący sposób: blok musi zapisać określoną szerokość, a następnie ustawić właściwość margines: 0 auto. Jest to wartość automatyczna, która wyrówna go poziomo dokładnie do środka. Oczywiście w tym celu musi być jedyny w swojej linii, w przeciwnym razie nic nie będzie działać.

Wszystkie rodzaje pozycjonowania wymienione w tym artykule mogą być przydatne dla twórcy stron internetowych. Gdzieś trzeba wstawić ikonę (pozycja: absolutna), gdzieś trzeba lekko dostosować położenie bloku, zostawiając za nim trochę miejsca (pozycja: względna), a gdzieś trzeba naprawić widżet (pozycja: stała). Ogólnie rzecz biorąc, znajomość tej właściwości na pewno nie będzie zbędna.

Cóż, aby dowiedzieć się jeszcze więcej ze świata tworzenia stron internetowych, koniecznie zasubskrybuj naszego bloga i otrzymuj nowe materiały szkoleniowe. Radzę również zajrzeć do naszego, gdzie również poruszany jest podobny temat. (pozycjonowanie elementów)