Относително позициониране. Позициониране и свободно движение на елементите
Със свойството POSITION
| Имот | Стойности | и т.н.* | Hc* |
|---|---|---|---|
| позиция | статичен, относителен, абсолютен, фиксиран, наследява | + | - |
Собствеността определя схема за позициониране на елементитепо отношение на неговия родител. Елементите с абсолютно и фиксирано позициониране се третират като блокови елементи.
Стойности:
статичен— статично позициониране, както е.
наследяват— наследяване на имоти от родителя.
Нека разгледаме останалите стойности по-подробно.
относителна стойност: относително позициониране
Елементът се измества спрямо позицията си с количествата, определени от стойностите на свойствата Bottom, Left, Right, Top. Това не засяга подреждането на елементите в нормалния поток, следващ го, сякаш не се е движил.
Елемент (позиция: относителна; горе: 25px; ляво: 50px; височина: 100px; ширина: 100px; рамка: 2px плътно #000;)
— позиционирането е зададено за блока с картината роднинаи отместване отгоре с 25px и отляво с 50px. Елементът се е преместил спрямо нормалния поток, като на практика удвоява тези стойности:
абсолютна стойност: абсолютно позициониране
Абсолютно позициониран елемент заема позицията, определена от стойностите на неговите свойства Отдолу, отляво, отдясно, отгоре, които определят отместването му спрямо границите на родителя.
Освен това стойността на имота Позицияродителският елемент влияе върху размера и позицията на позиционирания. Ако има стойност статиченили няма родител, тогава отместването се извършва спрямо границите на прозореца на браузъра. Абсолютно позиционираните блокове се изключват от нормалния поток, без да се засяга разположението на други елементи.
Елемент (позиция: абсолютна; горна: 25px; ляво: 50px; височина: 100px; ширина: 100px; граница: 2px плътна #000;)
— подобно на предишния пример, за елемента се взема само абсолютно позициониране. Той припокри предишния елемент, отместването беше измерено от границите на родителя:
Значение фиксирано: фиксирано позициониране
Позицията на елементите с фиксирано позициониране се определя по същия начин, както при абсолютно позиционираните. Единствената разлика е, че те са строго обвързани с границите на зоната за гледане и не променят позицията си в прозореца на браузъра при превъртане на страницата.
Използвана стойност фиксираниРядко. Обикновено това е хоризонтално менюв горната или долната част на страницата, както в Yandex mail.
Свойство Z-INDEX
| Имот | Стойности | и т.н.* | Hc* |
|---|---|---|---|
| ЦЯЛО ЧИСЛО, автоматично, наследяване | + | - |
Свойството определя разположението на позиционирания елемент спрямо оста Z. Това означава, че елементите са подредени един върху друг във възходящ ред - колкото по-висока е стойността на свойството z-index, толкова по-високо е разположен елементът. Валидно само за елементи, които имат зададена стойност на свойството Позицияи различен от статичен.
Стойности:
Автоматичен— елементите се поставят в реда на тяхното местоположение в кода на страницата.
наследяват- наследство от родител.
Елемент-1, .елемент-2, .елемент-3 ( позиция: относителна;)
.element-1 (z-индекс:3; ляво:40px; горе:50px; размер на шрифта:46px;)
.element-2 (z-index:2; ляво:50px;)
.element-3 (z-index:1; top:-50px; font-size:76px; color:#999;)
— имаме изображение като втори елемент. Редът на поставяне на първия и третия елемент е променен. Долният елемент-1 беше поставен отгоре, а 3-тият елемент се оказа долният „слой“:
Блоковият елемент в HTML е елемент, който по подразбиране заема цялата ширина на своя родителски елемент. Родителският елемент може да бъде друг блоков елемент или прозорец на браузър. Можете да зададете ширината и височината на блоков елемент, като използвате CSS свойства. Позициониране блокови елементие процесът на тяхното позициониране в прозореца на браузъра и тяхното съотнасяне с помощта на свойствата на CSS позиция, ляво, горе, дясно и долу. Свойството CSS position е предназначено да зададе едно от четирите налични видовепозициониране: статично (по подразбиране), абсолютно, фиксирано и относително. Останалите CSS свойства, а именно left, top, right и bottom, се използват за задаване на разстояния спрямо левия, горния, десния и долния ръб на родителския елемент. Също така блоковите елементи могат да се припокриват, когато задават определени свойства и тази възможностсъщото може да се използва в уебсайтове.
Позициониране по подразбиране (статично)
Ако не сте посочили позиция за блоков елемент или сте посочили static, което е едно и също нещо, тогава блоковите елементи се подреждат по ред. Освен това следващият блок (например: червен) се намира с нова линия. Също така, това позициониране не се влияе от настройката на разстоянията отляво, отгоре, отдясно и отдолу.
Абсолютно позициониране (абсолютно)
При абсолютното позициониране позицията на елемент се определя спрямо краищата на прозореца на браузъра, като се използват разстояния, определени от свойствата ляво, горе, дясно и долу. Ако посочите разстоянията отляво и отдясно едновременно и те са в конфликт едно с друго, тогава се дава предпочитание на ляво, същото важи и за отгоре и отдолу, при което разстоянието отгоре има предимство. Абсолютното позициониране често се използва във връзка с относителното позициониране за целите на дизайна, когато е необходимо да се постави различни елементиедин спрямо друг, могат да се използват и за създаване на падащи менюта, оформление на сайта и т.н.
Фиксирано позициониране
Фиксираното позициониране е различно от другите видове позициониране и не се движи със съдържанието, докато превъртате страницата. Блоковите елементи с фиксирана позиция се закотвят с помощта на свойствата left, top, right и bottom към краищата на прозореца на браузъра. Използва се фиксирано позициониране за създаване на рамкови интерфейси (прозорецът на браузъра е разделен на няколко области), фиксирано меню, фиксиран долен колонтитул на сайта и „постоянни“ блокове (списък с връзки, социални бутонии т.н.).
Относително позициониране
Относителното позициониране се определя чрез указване на разстоянията отляво, отгоре, отдясно и отдолу спрямо него текущо състояние.
Тази блокова позиция обаче може да бъде създадена и с помощта на маржин свойства(отстъпи).
Относителното позициониране не е забавно да се използва само по себе си, то се използва най-вече във връзка с абсолютното позициониране.
Нека разгледаме опциите:
Здравейте, скъпи читатели на сайта на блога. Днес ще говорим за принципи Html позициониранеелементи с помощта на CSSПравила за позициониране (с абсолютни, относителни и фиксирани стойности) и свойства, определящи ляво, дясно, горно и долно отместване. Виждате ли звездата в долния ляв ъгъл? След като прочетете статията до края, ще разберете как се стигна до там.
В миналата статия говорихме за един от основните, който помага да се прекъсне нормалният поток от последователни HTML кодетикети. Позволява ви да приложите, на което сега основно се основава изграждането на сайт. Но не само Float...
Position relative - относително позициониране
Има и Position, който отговаря за позиционирането на тагове с помощта на каскадни стилови листове и също така позволява нарушават нормалния поток. В разбирането това правило ще бъде малко по-сложно от предишния обсъден float, но мисля, че можем да се справим с него.
Има четири възможни стойности (статични | относителни | абсолютни | фиксирани). Как можем да знаем това? Е, разбира се, от спецификацията, която е публикувана на официалния уебсайт:
Стойността по подразбиране е позиция: статична. Тези. в нормален поток двете CSS правила, които могат да го нарушат, имат стойности по подразбиране static и float:none. Веднага щом една от тези стойности се промени, нормалният поток от HTML код на това място ще бъде нарушен, защото сега този маркер може да взаимодейства със съседите си по съвсем различен начин или дори да не взаимодейства изобщо.
Да започнем с относително позициониране, което ще съответства на стойността позиция: относителна. След като го регистрираме за таг, ще можем да зададем отместването (позицията) за този елемент с помощта на доп правила Ляво, дясно, горе и долу(съответно наляво, надясно, нагоре и надолу):
По подразбиране и за четирите е Auto. Когато посочим позицията: относително правило за таг, стойностите на отстъпа от всички страни се нулират до нула и ви се дава възможност да ги зададете сами.
Трябва да се разбере как се задават отстъпите. Например ляво: 400px означава отстъп от лявата страна надясно със съответната стойност, а top: 100px означава от горната страна надолу. Ако зададете отрицателни стойности за отляво, отдясно, отгоре и отдолу, елементът ще се движи в обратна посока (например отгоре е отгоре, а отляво е отляво).
Нека да разгледаме използването на relative върху плаващ елемент. Нека имаме два контейнера Div, които ще оцветим с различни фонови цветове за по-голяма яснота, използвайки .
Първоначално ще накараме първия контейнер да плава наляво, като използваме съответното свойство и след това ще бъде празен, тогава ще го дадем (и отстъп с помощта на поле):
В резултат на това ще получим нещо като тази маслена картина:
Първият контейнер, както се очаква, плава вляво. В същото време самият втори блок изглежда не забелязва това (защото го), но забелязва вградения текстов елемент, който тече около нашия плаващ блок.
Сега нека добавим към CSS правилаза първата позиция на контейнера: относителна и задайте лявото и горното поле с помощта на Left and top:
В резултат на това ще видим, че нашият плаващ елемент се е преместил според зададените полета:
Забележете, че текстът все още продължава да тече около него, сякаш все още стои на мястото си. Тези. Много Html тагове, когато са конструирани, считат, че са на правилното им място (без да се вземат предвид изместванията наляво и нагоре, които сме посочили в правилата).
Но не всички тагове ще направят това, в противен случай няма да видим никакви промени. Най-близкият предшественик със свитък(в нашия случай това ще бъде Html таг, т.е. всъщност зоната за гледане) тези промени ще бъдат забелязани.
Принципът на действие на относителната не е сложен, но не е съвсем ясно защо може да се използва на практика. Всъщност това правило се използва във връзка с абсолютна позиция, като в този си вид намира много широко приложение. Но на първо място.
Position absolute – абсолютно позициониране в CSS
Нека да преминем към разглеждане на абсолютното позициониране. Най-лесният начин да започнете да разглеждате това CSS правило е с илюстративен пример. Да кажем, че вътре в контейнера Div имаме вграден таг Span, за който ще зададем абсолютно позициониране.
Но първо, нека разгледаме тази конструкция, без да добавяме „позиция: абсолютна“. В същото време, за да подчертаем линията на Span, ще добавим височина към нея, която така или иначе няма да бъде приложена, и този път ще добавим CSS кода, за промяна, не чрез конструкцията Head:
<тип стил="text/css"> #abs( background:#FFC0C0; margin-left: 100px; ) #abs span( background:#C0FFC0; height:100px; )
За Div също задаваме лявото поле на 100px. Е, сега нека да видим какво се променя, ако дадем на нашия таг за линия Span абсолютно позициониране чрез добавяне Абсолютни правила за CSS позиция:
#abs span( background:#C0FFC0; height:100px; position:absolute; )>
Случи се нещо странно. Съдейки по факта, че свойството height:100px е приложено към Span, то е престанало да бъде вграден таг. След това очевидно фрагментите „първи“ и „трети“ се присъединиха един към друг, сякаш елементът с думата „втори“ вече не съществуваше между тях. Точно така работи абсолютното позициониране в CSS.
Но нека разгледаме всичко точка по точка, когато задаваме свойство на елемент "позиция: абсолютна":
- Етикетът, за който е указано това правило, става блоков таг
- Размерите на този блок ще се определят от съдържанието, което съдържа (освен ако не ги посочите изрично, като използвате ширина и височина).
- Таг с посочена „позиция: абсолютна“ не взаимодейства с никакви други елементи на Html код, освен с най-близкия превъртащ се родител. Всички други тагове в кода просто не забелязват елемент с абсолютно позициониране (и това може да се види от нашия пример)
Точно както при плаващи елементи (с посочен Float), ако „позиция: абсолютна“ е приложена към тага, ефектът на свиване на маржа за такива тагове няма да се появи. Тези. Никой няма да може да му прехвърли своите вертикални отстъпи и той също няма да може да ги прехвърли на никого (той не споделя вертикални отстъпи с никого).
Ако си спомняте предишната статия от раздела “”, ще видите, че и трите точки са били наблюдавани при създаването на плаващи елементи с помощта на Float.
Следователно, ако Float вече е зададен за таг, но след това е посочено „position: absolute“ за него, тогава първият се нулира от браузъра (той отговаря за анализирането на кода) на None (стойността по подразбиране), тъй като няма смисъл да се прилагат два еднакви модела.
Всичко това е добре, но с помощта на „абсолютно“ трябва да извършим абсолютно позициониране. Е, всъщност това наистина е вярно. В комбинация с него можем да използваме същите четири CSS правила: ляво, дясно, горе и долу. Как ще работят с абсолютно позициониране?
Те пак ще зададат отместване, но отместването вече не е спрямо текущата позиция на елемента, а спрямо границите на неговия контейнер.
И самата концепция контейнер за абсолютно позиционирани елементище се различава от общоприетото. От предишни статии сигурно си спомняте, че контейнер за Html таге прозорецът за изглед, а за всички останали е областта на съдържанието на родителя. Това няма да важи за етикет с посочена абсолютна позиция.
С абсолютното позициониране ще можем сами да присвоим контейнера (той ще бъде първият от предците, който има стойността на позицията е различна от статичната, използва се по подразбиране).
Да кажем, че ако сме задали само абсолютно позициониране, но не сме посочили никакви стойности за правилата за ляво, дясно, горно и долно, тогава за тях ще се използва стойността Auto по подразбиране и такъв елемент ще остане на мястото си (както в нашата последна екранна снимка). Тук всичко трябва да е ясно.
CSS използва структурата предшественик-дете, за която вече писах в някои подробности в статията за . Нашата задача, когато дефинираме контейнер за абсолютно позициониран таг, ще бъде да намерим предшественик с позиция, която има стойност, различна от статична (т.е. когато е изрично посочена).
В нашия пример не присвоихме позиция на нито един от предците на етикета Span, така че след като достигнахме самия връх ( HTML таг) ще спрем дотук. Нека зададем нулеви подложки за примера, обсъден малко по-горе, и се уверете, че сме прави:
#abs span( background:#C0FFC0; height:100px; position:absolute; left:0; top:0; )>
В резултат на това абсолютно позиционираният етикет беше притиснат към нулевата референтна точка на прозореца за изглед. Но ние самите сме свободни изберете контейнер за елемент със зададената абсолютна позиция. Как може да стане това?
Комбинацията от абсолютна и относителна позиция в оформлението на Div
Е, защо не използвате CSS правилото „position: relative“ за това. Нека го регистрираме в необходимия етикетпредшественик (който в крайна сметка ще стане контейнер за абсолютно позициониран елемент) и няма да указва стойностите отляво, надясно, отгоре или отдолу, като по този начин всъщност няма да прави никакви промени в позицията на този предшественик (това ще остане в нормалния поток), но присвояването му контейнер и началото на отчетаза нашето абсолютно позициониране.
Ако въведем „relative“ за етикета Body, нашето изображение ще се промени леко:
Виждате, появиха се характерни вдлъбнатини, които показват, че горният ляв ъгъл на етикета Body вече е взет за начална точка. Не забравяйте, че стойностите по подразбиране за този маркер включват поле от 8 пиксела, което виждаме:
Сега нека, в допълнение към вече направеното, напишем „position: relative“ за контейнера Div, вътре в който се намира тагът Span:
Както виждаме, картината се е променила. Въпреки факта, че относителното е посочено както за Body, така и за Div, именно Div стана контейнерът за абсолютно позиционирания Span, т.к. той е първи прародител, чиято стойност на позиция е различна от статична.
Освен това, ако също напишем , за нашия Div, ще видим, че областта на съдържанието със съществуващата вътрешна подложка ще се използва като контейнер за абсолютно позициониране:
#abs( background:#FFC0C0; margin-left: 100px; position: relative; border:12px dotted #ccf; padding:20px; )
Както се вижда от примера, референтната точка се намира вляво горен ъгълвътре в рамката на елемента (по вътрешната му граница). Оттук следва правилото, че за тагове с „position: relative“ (които са контейнери с абсолютно позициониране), би било по-добре изобщо да не се използва рамка, за да се избегнат излишъци.
Отстъпи (изместване) Ляво, дясно, горе и долу могат да бъдат зададени не само в абсолютни единици(прочетете за), но също и като процент, който ще бъде взет от ширината (ляво и дясно) и височината (отгоре и отдолу) на получения контейнер. Тези. "top:100%" ще съответства на 100% от височината на контейнера, а "left:100%" ще съответства на 100% от неговата ширина.
И това беше взаимодействието, описано по-горе, което имах предвид, когато говорех комбинация от абсолютна и относителна позиция. Благодарение на това имаме възможността сами да изберем контейнера или с други думи отправната точка за абсолютно позициониране. Защо тази връзка се използва на практика?
За да реализират задача, подобна например на така наречения Litebox за показване на снимка в пълен размер, те могат да използват този принцип.
Тези. ако имате нужда от страницата формират външния вид и скриването на елемент, който, когато се появи, няма да засегне всички останали тагове (да взаимодейства с тях). В този случай появата на абсолютно позициониран блок няма да доведе до дръпване и преструктуриране на цялата уеб страница.
За падащо меню направете нещо като следното. Когато задържите курсора на мишката (настроен в CSS с ) върху елемента от основното меню, се появява елемент, позициониран абсолютно позициониран с „абсолютен“ (вложени елементи от менюто, създадени въз основа на ). Този падащ списък се появява до елемента от основното меню по простата причина, че в него е указана позиция: относителна. Всичко.
Фиксирана позиция - прилепване към прозореца за изглед
Последният метод за позициониране е "позиция: фиксирана". Обсъдените по-рано методи бяха проектирани да бъдат поставени спрямо всеки Html кодов елемент. Но ако започнем да превъртаме страницата, тогава нейните тагове (дори тези с абсолютно или относително позициониране) се местят нагоре (или надолу).
Но когато използвате фиксирани, това вече няма да се случи. Елемент, позициониран по този начин, винаги ще бъде на една и съща позиция в прозореца за изглед, независимо от превъртането на уеб страницата. Вероятно вече сте срещали такива опции в уебсайтове. Например, доста работа се основава на подобен ефект. популярен плъгинза WordPress, наречен .
За таг с посочената позиция: фиксирана, никой не търси контейнер, защото това е самият изглед. Точно това е разликата от „абсолютно“, а всичко останало е същото. Блоковете с фиксирано разположение се държат, докато превъртате страницата, сякаш са елементи от интерфейса на прозореца на вашия браузър (винаги са ви под ръка).
Така се реализират например ленти с инструменти, падащи панели с възможност за оставяне на обратна връзка и др. неща. Като пример на тази страница Зададох позиция: фиксирана за малка снимкав долния ляв ъгъл на вашия екран (прозорец):
Това е всичко за днес, в следващата статия ще говорим за , което е приложимо само за вече позиционирани елементи на кода, т.е. за които са определени фиксирани, относителни или абсолютни стойности.
Късмет! Ще се видим скоро на страниците на сайта на блога
Можете да гледате още видеоклипове, като отидете на");">
Може да се интересувате
Позициониране с помощта на Z-индекс и CSS Cursor правило за промяна на курсора на мишката 
Плаване и изчистване в CSS - инструменти за блоково оформление 
Стил на списък(тип, изображение, позиция) - Css правила за персонализиране външен видсписъци в HTML код 
Показване (блоково, без, вградено) в CSS - задайте типа на показване HTML елементина уеб страницата 
За какво е CSS, как да свържете каскадни таблици със стилове HTML документи основния синтаксис на този език
Два основни инструмента често се използват за оформление на страница - позициониранеИ свободно движение (плаващ). CSS позиционирането ви позволява да посочите къде да се появява полето на даден елемент, а свободното плаване премества елементите в левия или десния край на контейнерното поле, позволявайки на останалата част от съдържанието да „тече“ около него.
Позициониране и свободно движение на елементите
1. Видове позициониране
Свойството позиция ви позволява точно да посочите новото местоположение на блока спрямо мястото, където би бил в нормалния поток на документа. По подразбиране всички елементи са подредени последователно един след друг в реда, в който са дефинирани в структурата на HTML документа. Имотът не е наследен.
| позиция | |
|---|---|
| Значение: | |
| статичен | Стойността по подразбиране означава липса на позициониране. Елементите се показват последователно един след друг в реда, в който са дефинирани в HTML документа. Използва се за изчистване на всяка друга стойност за позициониране. |
| роднина | Относително позициониран елемент се премества от нормалната си позиция в различни посоки спрямо границите на неговия родителски контейнер, но пространството, което е заемал, не изчезва. Такъв елемент обаче може да припокрива друго съдържание на страницата. Ако за относително позициониран елемент зададете едновременно свойствата отгоре и отдолу или отляво и отдясно, тогава в първия случай ще работи само отгоре, във втория - отляво. Относителното позициониране ви позволява да зададете z-индекс за елемент, както и абсолютно позициониране на дъщерни елементи в блок. |
| абсолютен | Абсолютно позициониран елемент се премахва напълно от документния поток и се позиционира спрямо границите на неговия контейнерен блок (друг елемент или прозорец на браузъра). Контейнерният блок за абсолютно позициониран елемент е най-близкият предшестващ елемент, чиято стойност на свойството за позиция не е статична. Местоположението на ръбовете на елемента се определя с помощта на свойствата на отместването. Пространството, което е заемал такъв елемент, се свива, сякаш елементът не съществува на страницата. Абсолютно позициониран елемент може да се припокрива или да бъде насложен от други елементи (поради свойството z-index). Всеки абсолютно позициониран елемент генерира блок, т.е. приема стойността display: block; . |
| фиксирани | Коригира елемент на определено място на страницата. Контейнерният блок на фиксиран елемент е прозорецът за изглед, т.е. елементът винаги е фиксиран спрямо прозореца на браузъра и не променя позицията си, докато превъртате страницата. Самият елемент се премахва напълно от основния документен поток и се създава в нов документен поток. |
| начален | Задава стойността на свойството на стойността по подразбиране. |
| наследяват | Наследява стойността на свойството от родителския елемент. |
Ориз. 1. Разлика между статично, относително и абсолютно позициониране 2. Офсетни свойства
Свойствата описват отместването спрямо най-близката страна на контейнерния блок. Задайте за елементи, за които стойността на свойството позиция не е статична. Те могат да приемат както положителни, така и отрицателни стойности. Не се предава по наследство.
За горното свойство положителните стойности преместват горния ръб на позиционирания елемент отдолу, а отрицателните стойности преместват горния ръб на неговия контейнерен блок. За свойство ляво положителните стойности преместват ръба на позиционирания елемент надясно, а отрицателните стойности преместват ръба на позиционирания елемент наляво. Тоест положителните стойности преместват елемента вътре в контейнерния блок, а отрицателните стойности го преместват извън него.
3. Позициониране в елемент
За контейнерния блок на абсолютно позициониран елемент свойството position: relative се задава без отмествания. Това позволява елементите да бъдат позиционирани в контейнерния елемент.
Ориз. 2. Абсолютно относително позициониране4. Проблеми с позиционирането
1. Ако ширината или височината на абсолютно позициониран елемент е зададена на auto, тогава стойността му ще се определя от ширината или височината на съдържанието на елемента. Ако ширината или височината са декларирани изрично, това е стойността, която ще бъде присвоена.
2. Ако в блок с позиция: абсолютна има елементи, за които обвивка с плувка, тогава височината на този елемент ще бъде равна на височината на най-високия от тези елементи.
3. За елемент с position: absolute или position: fixed не можете едновременно да зададете свойството float, но за елемент с position: relative можете.
4. Ако предшественикът на позиционирания елемент е блоков елемент, тогава блоковият контейнер се формира от областта на съдържанието, ограничена от границата. Ако предшественикът е вграден елемент, контейнерният блок се формира от външната граница на неговото съдържание. Ако няма предшественик, контейнерният блок е елементът body.
5. Свободно движение на елементите
В нормалния ред блоковите елементи се изобразяват, започвайки от горния ръб на прозореца на браузъра и вървейки към долния ръб. Свойството float ви позволява да премествате всеки елемент, като го подравнявате към левия или десния край на уеб страницата или елемента контейнер, който го съдържа. В този случай други блокови елементи ще го игнорират и вградени елементище се измества надясно или наляво, освобождавайки място за него и тече около него.
Ориз. 3. Свободно движение на елементите Плаващ блок приема размерите на съдържанието си, като се вземат предвид подложките и границите. Горното и долното поле на плаващите елементи не се свиват. Свойството float се прилага както за блокови елементи, така и за вградени елементи.
Левият или десният външен ръб на преместен елемент, за разлика от позиционираните елементи, не може да бъде разположен отляво (или отдясно) на вътрешния ръб на неговия контейнерен блок, т.е. излизат извън неговите граници. Освен това, ако контейнерният блок е настроен на подплата, тогава плаващият блок ще бъде отдалечен от ръба на контейнерния блок на определено разстояние.
Свойството автоматично променя изчислената (показвана от браузъра) стойност на свойството display за показване: блок за следните стойности: inline, inline-block, table-row, table-row-group, table-column, table-column-group таблица-заглавие, група-заглавки на таблици, група-долни колонтитули. Стойността на inline-table се променя на table.
Свойството няма ефект върху елементи с display: flex и display: inline-flex.
Когато използвате свойството float върху блокови елементи, не забравяйте да посочите ширина. Това ще създаде място за друго съдържание в браузъра. Но ако комбинираната ширина на всички колони е по-голяма от наличното пространство, тогава последен елементще падне.
В същото време вертикалните полета на плаващите елементи не се свиват с полетата на съседните елементи, за разлика от обикновените блокови елементи.
6. Отменете потока около елементите
6.1. чиста собственост
Свойството clear определя как ще бъде позициониран елементът, който следва плаващия елемент. Свойството отменя float от едната или двете страни на елемента, зададен от свойството float. За да предотвратите показването на фон или граници под плаващи елементи, използвайте правилото (overflow: hidden;).
6.2. Почистване на поток със стилове с помощта на класа clearfix и псевдокласа :after
Да предположим, че имате блок контейнер, за който ширината и височината не са посочени. В него се поставя плаващ блок с определени размери.
Ориз. 4. „Ефект на свиване“ на контейнерния блокРешение на проблема:
Създаваме класа .clearfix и в комбинация с псевдокласа :after го прилагаме към контейнерния блок.
Втора опция за изчистване на потока:
Clearfix:after ( съдържание: ""; дисплей: таблица; изчистване: и двете; ) 
Ориз. 5. Прилагане на метода на „почистване“ към контейнерен блок, съдържащ плаващ елемент
6.3. Лесен начин за почистване на поток
Има друг трик за изчистване на потока за елемент, съдържащ плаващи елементи, като хоризонтален списък с водещи символи:
Ul ( margin: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; ) li (float: left; width: calc(100% / 3 - 20px); height: 50px; margin- дясно: 20px; фон: #ffffff; рамка: 3px прекъсната #666666; ) li:last-child (марж-дясно: 0;) Фиг. 6. Почистване на потока от хоризонтален списък
позиция
Свойство CSS позицияизползвани за указване на това как трябва да бъде позициониран HTML елемент на страница. Промяната на позицията на самия елемент се извършва чрез свойствата top, right, bottom и left.
Вид на имота
Предназначение: позициониране.
Отнася се за: всички елементи.
Наследени: не.
Стойности
Стойността на свойството CSS position е една от ключови думиопределяне на метода на позициониране.
- статичен- обичайното подреждане на елемент на страницата, като се вземе предвид неговия тип (блок, вграден и т.н.) и елементите около него.
- роднина- относително позициониране. Браузърът първо позиционира елемента като в нормална позиция и след това го премества спрямо това местоположение. В същото време останалите HTML елементи се държат така, сякаш елементът не е бил преместен никъде, тоест мястото, където е бил преди изместването, остава незаето и те „не го виждат“ на новото място.
- абсолютен- абсолютно позициониране. Елементът е позициониран спрямо най-близкия си предшественик, чиято стойност на свойството position не е равна на static (т.е. позицията присъства в два елемента едновременно). Ако няма такъв предшественик, тогава елементът се позиционира спрямо прозореца на браузъра. В същото време околните HTML елементи се държат така, сякаш абсолютно позиционираният елемент изобщо не е на страницата, тоест форматирането се извършва без негово участие.
- фиксирани- също и абсолютно позициониране. Почти същото като absolute, само че тук елементът изобщо не може да бъде позициониран спрямо който и да е предшестващ елемент, а само спрямо прозореца на браузъра, така че свойството position се използва само за самия елемент. Освен това при превъртане елементът не променя местоположението си в прозореца.
- наследяват- наследява стойността на свойството CSS position от родителския елемент.
Както знаете, обикновените вградени елементи не могат да получат изрично зададена височина (CSS) или ширина (CSS). Въпреки това, ако абсолютна или фиксирана стойност на позициониране се приложи към вграден елемент, тогава той става с възможност за промяна на размера. Запомнете тази функция, тя често помага много.
Процентно въвеждане:не съществува.
Стойност по подразбиране:статичен.
HTML елементите се наричат предци за тези тагове, които са вътре в тях на всяко ниво на влагане, и родители за тези, които са вътре в тях на първо ниво. Естествено, предците са и родителски елементи за своите потомци от първото ниво на влагане (деца).
Естествено, когато позиционирате, изобщо не е необходимо да използвате CSS свойствата top , right , bottom или left за промяна на позицията на елемента. Да, при относително позициониранетова няма да даде много ефект - елементът ще бъде изтръгнат от директния поток, но така или иначе никой няма да може да заеме мястото му. Но с absolute елементът не само ще бъде „изтръгнат“ от контекста на HTML страницата, но и по-ниски елементи ще заемат неговото място. Освен това, с позиция: фиксирана, тя също ще остане на едно място при превъртане.
Изображенията по-долу показват четири елемента на страницата, един родител и неговите три деца, и опции за позициониране на един от тях дъщерни елементиотносително спрямо родителя (абсолютно) и спрямо първоначалното му място (относително).
Синтаксис
позиция: статична | роднина | абсолютен | фиксиран | наследяват
CSS пример: използване на позиция
CSS версии
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддържа: | Не | да | да | да |
Браузъри
| Браузър: | Internet Explorer | Google Chrome | Mozilla Firefox | Опера | ||
| Версия: | 6.0 и 7.0 | 8.0 и по-високи | 2.0 и по-високи | 2.0 и по-високи | 9.2 и по-високи | 3.1 и по-високи |
| Поддържа: | частично | да | да | да | да | да |
Internet Explorer 6.0 и 7.0 не разбират стойността на наследяване, IE 6.0 все още не разбира fixed .