Здравствуйте, уважаемые читатели блога сайт! Настало время дополнить новыми полезными материалами и сегодня мы познакомимся с тем, каким образом можно разнообразить размещение различных элементов на странице, применив для них свойство позиционирования position с различными параметрами (static, relative, absolute, fixed).

Также в рамках озвученной выше темы рассмотрим, как можно задавать тот или иной отступ вправо, влево, вверх или вниз посредством использования соответствующих свойств left, right, top и bottom путем присвоения им нужных числовых значений.

Напомню, что любую вебстраницу мы можем рассматривать как упорядоченный . Они определяют вид того или иного элемента, а вот их расположение диктует набор правил каскадных таблиц стилей, которые в итоге создают законченную картину.

Определение позиции элемента и нормальное позиционирование (position static)

Для свойства position существует четыре значения (static | relative | absolute | fixed) , которые и определяют способ позиционирования. Как вы, наверное, знаете, параметры практически всех CSS правил можно почерпнуть с официальной странички спецификации W3 , где представлен полный набор свойств и их значений, в том числе position:

Позиционированием именуют расположение элемента в системе координат. На основании значений свойства position можно различить четыре типа позиционирования: нормальное, абсолютное, относительное и фиксированное.

При помощи position и упомянутых мною выше left, right, top, bottom (отступы соответственно влево, вправо, вверх, вниз) можно регулировать положение элементов один относительно другого, фиксировать их в определенном месте или даже производить наложение одного элемента на другой.

Более того, позиционированием можно управлять посредством скриптов. Это дает возможность придать любому элементу динамику, а также создать анимационные и другие эффекты.

В том случае, если position отсутствует или оно имеет значение static, элемент отображается в обычном порядке как составная часть HTML потока. То есть все составные части вебстраницы выводятся в той последовательности, которая присутствует в исходном коде страницы.

Резюмируя, отмечу, что значения, отличные от static, позволяют изменить стандартное расположение вебэлементов страницы, что очень важно в свете решения нетривиальных задач при верстке. Кстати, другим средством, которое способно поменять обычный порядок, является , с помощью которого можно создать плавающие элементы.

Position absolute (абсолютное позиционирование)

Итак, продолжим разбор технических нюансов абсолютным позиционированием, которое определяется параметром absolute свойства position:

Position: absolute

Важно понимать, что в данном случае элемент не будет отображаться в стандартном потоке. Соответственно у нас появляется возможность определить его местоположение в абсолютной системе координат, задав отступы от краев окна браузера посредством left, right, top, bottom:

Здесь A, B, C и D - числовые величины отступов. Теперь разберем особенности значения absolute на конкретном примере. Возьмем 2 с соответствующими , которым пропишем параметры (цвет фона), width (ширину) и height (высоту). Для простоты воспользуемся , который реализуется при помощи атрибута style.

В отличие от связанных стилей, являющихся на практике наиболее оптимальными, этот метод предусматривает размещение правил CSS не в отдельном файлике, а в виде значений атрибута STYLE, приписываемых нужному тегу. При этом для чистоты эксперимента пока position absolute добавлять не будем:

Чуть выше я уже сказал, что отсутствие position по умолчанию равнозначно тому, что для этого свойства указан параметр static. То есть отображение всех элементов происходит в обычной последовательности. Соответственно в нашем случае контейнеры будут располагаться по порядку (в стандартном HTML потоке):

Напомню, что для упорядочения и оптимизации каскадных таблиц стилей в CSS существует правило дочерними элементами свойств родителей. Поэтому в данном случае блочные теги занимают позицию с нулевым отступом и в пределах родительского элемента.

Что же произошло? После применения абсолютного позиционирования к определенному элементу все остальные блоки вебстраницы перестают его "замечать" и ведут себя так, словно его нет. Причем мы пока не указали величины смещения с помощью left, right, top и(или) bottom.

А в этом случае после применения к нему параметра absolute вебэлемент остается на месте, в то время как его сосед (в нашем примере нижний подкрашенный блок) перемещается вверх. В результате осуществляется наложение одного элемента на другой. Попробуем теперь указать отступ слева для абсолютно позиционированного вебэлемента left:0, в результате получаем вот что:

Итак, если указать в качестве отступа нулевое значение, то вебэлемент с параметром позиционирования absolute выйдет за пределы родителя и прилипнет к краю окна браузера. В зависимости от заданного свойства (left, right, top, bottom) это будет левый, правый, верхний или нижний предел.

Причем необходимо отметить, что left имеет преимущество перед right, а top перед bottom. Если они входят в конфликт друг с другом, то значения соответственно right и bottom игнорируются. Идем далее. Следующим шагом пропишем положительное значение для left верхнего контейнера:

В этом случае произойдет смещение вправо от левого края области просмотра, которая определяется тегом HTML документа. Давайте систематизируем и отметим по пунктам некоторые особенности поведения вебэлемента при присвоении ему position absolute:

• Если размеры блока не указаны явно посредством width и height, то они будут соответствовать размерам контента, включая значения границ и отступов;
• Вебэлемент не будет менять свое место, если у него не прописаны значения left, right, top или bottom;
• Как уже было сказано, left имеет более высокий приоритет перед right, а top перед bottom;
• Если элементу присвоить отрицательное значение left или top, то блок уйдет за границы области просмотра. При этом полоса прокрутки не появится. Этот нюанс можно использовать для удаления вебэлемента из зоны видимости;
• В случае, если left указывается значение, превышающее ширину области просмотра или для right определяется отрицательная величина, то появляется горизонтальная прокрутка. Это же самое касается пары top и bottom;
• Ширина блока с абсолютным позиционированием формируется с помощью left и right, однако, только тогда, когда width не указано. Аналогично происходит формирование высоты элемента при помощи top, bottom и height;
• Вэбэлемент с параметром absolute перемещается одновременно со страницей при ее прокрутке

Думаю, я все разложил по полочкам что касается абсолютного позиционирования и вы можете сами определить, какое практическое применение может быть у элементов с таким свойством. Впрочем, в виде информации скажу, что при помощи свойства position со значением absolute можно создать блоки с фреймами, добавив правило overflow с параметром auto. Также существует возможность получить всплывающие подсказки для фото или изображений.

Position relative (относительное позиционирование)

Если для элемента со свойством position, которому присвоен параметр relative, определить значения left, right, top или bottom, то он изменит свое местоположение относительно своей изначальной позиции. Причем положительная величина left перемещает вебэлемент вправо от его левой границы, а отрицательная - влево. Аналогичные сдвиги происходят и при применении свойства top, только в вертикальной плоскости (в случае положительного значения вниз, отрицательного - вверх):

Для примера, который поможет наглядно продемонстрировать действие данной разновидности свойства position, возьмем два контейнера, один из которых с помощью свойства float:left загоним влево, а текстовое содержание второго контейнера будет обтекать этот блок. Для наглядности придадим фон этим элементам, размеры с помощью width и height, а также необходимые отступы посредством свойства margin:

Выглядеть это будет так:

Теперь добавляем к правилу CSS для первого блока position relative, а также смещения вправо (left) и вниз (top) для того, чтобы относительное позиционирование дало результат:

В итоге результирующий вид будет таким:

Как видите, произошло смещение блока по заданным параметрам. Однако, соседний элемент не отреагировал на это и текст по-прежнему обтекает перемещенный контейнер как если бы тот оставался на своем прежнем месте.

С помощью предоставленного примера, думаю, понятно как работает относительное позиционирование, однако практическое применение в чистом виде ему найти сложно. Гораздо более востребован с этой точки зрения вариант взаимодействия параметров absolute и relative, который мы и разберем ниже.

Совместное использование position absolute и relative

Теперь рассмотрим, какой результат может дать использование в связке двух видов позиционирования. Ежели родительскому элементу присвоить значение relative, а дочернему absolute, то осуществится замена системы координат и местоположение дочернего вэбэлемента будет определяться относительно его родителя:

В качестве примера практического использования данного сочетания двух видов позиционирования приведу, пожалуй свой блог, где я недавно реализовал наложение заголовка и описания на изображение шапки. Первоначально картинка выглядела так:

Для реализации задачи я поступил следующим образом. Вначале прописал в STYLE.CSS своей темы relative для свойства position классу «site-header» родительского тега HEADER:

Также для корректного вывода мне пришлось определить ширину блока с классом «site-description», указав значение width:

Затем для класса «site-branding» дочернего контейнера DIV я указал абсолютное позиционирование и прописал отступы left и top, которые будут определять местоположение элемента в этом случае не в абсолютном исчислении (применительно к окну браузера), а относительно расположения родителя.

Также необходимо было удалить из набора правил CSS для этого тега свойство «text-align:center», чтобы выровнять текст заголовка и дескрипшн по левому краю. В результате такого взаимодействия относительного и абсолютного позиционирования задача была решена и нужный текст в виде заголовка и описания блога был наложен на изображение шапки:

Кроме предложенного мной примера с помощью связки relative absolute можно реализовать в общем случае такие задачи, которые предполагают появление и исчезание определенных вебэлементов. Причем в этом случае они не будут препятствовать правильному отображению остальных составных частей вебстраницы.

Частным случаем может стать, например, создание выпадающего меню на сайте. Это работает следующим образом. Если подвести курсор мышки к заглавному пункту меню, то появляется абсолютно позиционированный блок, сделанный на базе стандартных HTML . Его появление обеспечивает то обстоятельство, что соответствующему тегу назначен параметр relative свойства position.

Фиксированное позиционирование position fixed

Ну и последний параметр свойства position помогает фиксировать нужные вебэлементы на странице. В принципе этот вид позиционирования очень похож на абсолютное с той лишь разницей, что элемент с прописанным значением fixed привязан к определенной области на экране в окне браузера посредством left, right, top, bottom. Он остается на месте даже при прокрутке страницы.

Очень показательным примером может оказаться материал о с помощью position fixed, об этом можете почитать, перейдя на страницу по предоставленной ссылке. Рекомендую ознакомиться с этим материалом, даже если вы не планируете реализовывать подобную панель навигации на своем вебресурсе, поскольку данный пример очень показателен и помогает понять суть фиксированного позиционирования.

Кроме реализации плавающего меню position fixed используется при создании различного вида заголовков, вкладок, изображений. Одним словом, для закрепления тех блоков на вебстранице, которые наиболее важны с точки зрения улучшения поведенческих характеристик пользователей, повышения конверсии коммерческого проекта и т.д.

Публикация подошла к своему логическому завершению. В следующей статье я планирую коснуться нюансов использования свойства , значения которого влияют на расположение позиционированных блоков на вебстранице. По сути, это будет продолжение сегодняшнего материала. В завершение хочу напомнить, что вы можете отметить старания автора нажатием на социальные кнопки чуть ниже, ну и высказать свое отношение о пользе предложенной информации в комментариях.

letter-spacing line-height list-style margin max-height max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space width word-spacing

Справочник HTML Уроки HTML Видеокурсы по созданию сайта

С войство POSITION

Свойство	Значения	Пр*	Нc*
position	static , relative, absolute, fixed, inherit	+	-

Свойство определяет схему позиционирования элемента относительно его родителя. Элементы с абсолютным и фиксированным позиционированием рассматриваются как блочные.

Значения:

static — статическое позиционирование, как есть.
inherit — наследование свойств от родителя.

Остальные значения рассмотрим подробнее.

Значение relative: относительное позиционирование

Элемент смещается относительно своего положения на величины, заданные значениями свойств Bottom, Left, Right, Top . Это не оказывает влияние на расположение элементов в нормальном потоке, следующих за ним, как будто он не смещался.

Element { position: relative; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;}
— для блока с картинкой задано позиционирование relative и смещение сверху на 25px и слева на 50px. Элемент сместился относительно нормального потока, на практике удвоив эти значения:

Значение absolute: абсолютное позиционирование

Элемент с абсолютным позиционированием занимает положение, определённое значениями свойств Bottom, Left, Right, Top , которые задают его смещение относительно границ родителя.

Причем значение свойства Position родительского элемента оказывает влияние на размер и положение позиционированного. Если у него значение static или родителя нет, то смещение происходит относительно границ окошка браузера. Блоки с абсолютным позиционированием исключаются из нормального потока, не оказывая влияния на расположение остальных элементов.

Element { position: absolute; top: 25px; left: 50px; height: 100px; width: 100px; border: 2px solid #000;}

— аналогично предыдущему примеру, только для элемента взято абсолютное позиционирование. Он перекрыл предыдущий элемент, смещение отсчитывалось от границ родителя:

Значение fixed: фиксированное позиционирование

Положение элементов с фиксированным позиционированием определяется, как и у абсолютно позиционированных. С той только разницей, что они жёстко привязаны к границам области просмотра и не меняют своего положения в окошке браузера при прокрутке страницы.

Используют значение fixed редко. Как правило, это горизонтальное меню вверху или внизу страницы, как в почте Яндекса.

С войство Z-INDEX

Свойство	Значения	Пр*	Нc*
ЦЕЛОЕ ЧИСЛО, auto , inherit	+	-

Свойство задаёт размещение позиционированного элемента относительно оси Z. Что означает: элементы накладываются друг на друга в порядке возрастания — чем больше значение свойства z-index, тем выше расположен элемент. Действует только для элементов, у которых задано значение свойства Position и отлично от static .

Значения:

auto — элементы размещаются в порядке их расположения в коде страницы.
inherit — наследование от родителя.

Element-1, .element-2, .element-3 { position:relative;}
.element-1 { z-index:3; left:40px; top:50px; font-size:46px;}
.element-2 { z-index:2; left:50px;}
.element-3 { z-index:1; top:-50px;font-size:76px; color:#999;}

— в качестве второго элемента у нас изображение. Поменялся порядок размещения у первого и третьего элементов. Нижний элемент-1 разместился сверху, а 3-ий оказался нижним «слоем»:

Свойство CSS position отвечает за месторасположения элемента относительно других элементов. Используется в стилях довольно часто и поддерживается всеми браузерами (Internet Explorer, Netscape, Opera, Safari, Mozilla, Firefox, Chrome, Яндекс Браузер). Приведем простенький пример для понимания.

Примера 1 . HTML-код:

Обычный текст Этот текст ниже на 10 пикселей А этот наоборот выше

После того, как Вы откроете этот пример в окне браузера, должно отобразиться примерно следующее:

Это самый простой пример использования свойства CSS position . Теперь давайте рассмотрим все возможные атрибуты, которые может принимать этот параметр.

Синтаксис CSS position

position : absolute | fixed | relative | static | inherit ;

Примечание: через | перечислены все его возможные значения. Рассмотри каждый параметр в отдельности

1. CSS position: relative

Свойство position: relative - относительное позиционирование. Мы видели пример использования этого элемента чуть выше.

При задании этого параметра, активизируются следующие параметры:

• bottom
• left
• right

Если не указано никаких смещений, т.е.

top : 0px ; bottom : 0px ; left : 0px ; right : 0px ;

то отображение html-элемента происходит на том же месте как и по умолчанию (т.е. без задания relative). Если же указаны смещения, то элемент будет смещен относительно своего расположения либо ниже, выше, левее или правее. При этом другие окружающие элементы считают, что никакого смещения нету. Короче говоря, использовать relative имеет смысл только если мы задали смещения.

Для пояснения этой особенности приведем пример.

Примера 2 . HTML-код:

В чем же тогда разница?...

Примера 2* . Добавим к первому диву: position: relative; . HTML-код:

В чем же тогда разница? ...

Код преобразуется в следующее:

Наш красный квадрат переместился на 200 пикселей влево и на 100 пикселей вниз и частично своей площадью закрыл текст. При этом то место, где должен был наш квадрат текст по-прежнему его огибает как будто он там есть.

2. CSS position: absolute

Свойство CSS position: absolute - в данном случае считается, что начало отсчета - левый верхний угол. Здесь также действуют свойства top , bottom , left , right . При этом элемент который обладает атрибутом absolute становится как бы блочным элементом. Приведем пример.

Примера 3 . HTML-код:

Текст один Текст два Текст три

Код преобразуется в следующее:

В данном случае все три текста написаны друг за другом. Заметим, что мы специально сделали отступ слева padding-left:100px; в 100 пикселей. Теперь рассмотрим, что будет если мы во второй font добавим атрибут position: absolute .

Примера 3* . HTML-код:

Текст один Текст два Текст три

Код преобразуется в следующее:

Заметим, что текст два уехал влево и теперь стоит на первой позиции. При этом текст три занял место второго. Почему так произошло? Потому что мы добавили position:absolute и отступ слева: left:0px . Как я писал выше, при атрибуте absolute начало отсчета для элемента становится - левый верхний угол.

3. CSS position: fixed

Свойство CSS position: fixed - фиксированное расположение элемента, даже при прокрутке скролла. Пожалуй, это один из самых распространенных вариантов использования position. Если при этом заданы параметры top и left, то элемент будет размещен относительно левого верхнего угла. Если же параметры не указаны, то он будет фиксироваться в таком положении, как он встретиться на странице. Приведем пример.

Примера 4. HTML-код:

Фиксированный текст

Тут идет текст текст текст
Тут идет текст текст текст ...

Код преобразуется в следующее:

В данном примере верхняя строчка с текстом "фиксированный текст" всегда видна на странице браузера в любом положении скролла. Это свойство часто используют сайты, которые размещают рекламные строчки типо NOLIX, DAOS и т.п. См. как сделать строку как NOLIX и DAOS .

4. Остальные значения CSS position

4.1. Свойство position: static - этот параметр стоит по умолчанию. Параметры left, top, right и bottom не работают при этом значении.

4.2. Свойство position: inherit - наследование значение родителя. Т.е. смотрится ближайший элемент, в который заключен этот html-элемент и наследуется его значение.

Для обращения к position из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.position ="VALUE "

Для вёрстки страниц часто используются два основных инструмента — позиционирование (positioning) и свободное перемещение (floating) . CSS-позиционирование позволяет указать, где появится блок элемента, а свободное перемещение перемещает элементы к левому или правому краю блока-контейнера, позволяя остальному содержимому «обтекать» его.

Позиционирование и свободное перемещение элементов

1. Типы позиционирования

Свойство position позволяет точно задать новое местоположение блока относительно того места, где он находился бы в нормальном потоке документа. По умолчанию все элементы располагаются последовательно один за другим в том порядке, в котором они определены в структуре HTML-документа. Свойство не наследуется.

position
Значение:
static	Значение по умолчанию, означает отсутствие позиционирования. Элементы отображаются последовательно один за другим в том порядке, в котором они определены в HTML-документе. Используется для очистки любого другого значения позиционирования.
relative	Относительно позиционированный элемент сдвигается со своего обычного места в разных направлениях относительно границ родительского контейнера, а пространство, которое он занимал, не исчезает. При этом такой элемент может перекрывать другое содержимое на странице. Если для относительно позиционированного элемента одновременно задать свойства top и bottom или left и right , то в первом случае сработает только top , во втором — left . Относительное позиционирование позволяет задавать z-index для элемента, а также абсолютно позиционировать дочерние элементы внутри блока.
absolute	Абсолютно позиционированный элемент полностью удаляется из потока документа и позиционируется относительно границ его блока-контейнера (другого элемента или окна браузера). Блок-контейнер для абсолютно позиционированного элемента — ближайший элемент-предок, значение свойства position которого не равно static . Местоположение краёв элемента определяется с помощью свойств смещения. Пространство, которое занимал такой элемент, схлопывается, как будто элемента не существовало на странице. Абсолютно позиционированный элемент может перекрывать другие элементы или быть перекрытым ими (за счёт свойства z-index). Любой абсолютно позиционированный элемент генерирует блок, то есть принимает значение display: block; .
fixed	Фиксирует элемент в указанном месте страницы. Блоком-контейнером фиксированного элемента является окно просмотра, то есть элемент всегда фиксируется относительно окна браузера и не меняет своего положения во время прокрутки страницы. Сам элемент при этом полностью удаляется из основного потока документа и создаётся в новом потоке документа.
initial	Устанавливает значение свойства в значение по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Рис. 1. Разница между статичным, относительным и абсолютным позиционированием

2. Свойства смещения

Свойства описывают смещение относительно ближайшей стороны блока-контейнера. Задаются для элементов, для которых значение свойства position не равно static . Могут принимать как положительные, так и отрицательные значения. Не наследуются.

Для свойства top положительные значения перемещают верхний край позиционируемого элемента ниже, а отрицательные — выше верхнего края его блока-контейнера. Для свойства left положительные значения сдвигают край позиционируемого элемента вправо, а отрицательные значения — влево. То есть, положительные значения смещают элемент внутрь блока-контейнера, а отрицательные — за его пределы.

3. Позиционирование внутри элемента

Для блока-контейнера абсолютно позиционированного элемента задаётся свойство position: relative без смещений. Это позволяет позиционировать элементы внутри элемента-контейнера.

.wrap { padding: 10px; height: 150px; position: relative; background: #e7e6d4; text-align: right; border: 3px dashed #645a4e; } .white { position: absolute; width: 200px; top: 10px; left: 10px; padding: 10px; background: #ffffff; border: 3px dashed #312a22; }
Рис. 2. Абсолютное относительное позиционирование

4. Проблемы позиционирования

1. Если ширине или высоте абсолютно позиционированного элемента присвоено значение auto , то её значение будет определяться шириной или высотой содержимого элемента. Если ширина или высота объявлена явно, то именно это значение и будет присвоено.
2. Если внутри блока с position: absolute расположены элементы, для которых задано обтекание float , то высота этого элемента будет равна высоте самого высокого из этих элементов.
3. Для элемента с position: absolute или position: fixed нельзя одновременно устанавливать свойство float , а для элемента с position: relative — можно.
4. Если предок позиционированного элемента является блочным элементом, то блок-контейнер формируется областью содержимого, ограниченной рамкой (border). Если предок — строковый элемент, блок-контейнер формируется внешней границей его содержимого. Если предка нет, блоком-контейнером является элемент body .

5. Свободное перемещение элементов

В обычном порядке блочные элементы отображаются, начиная с верхнего края окна браузера по направлению к нижнему краю. Свойство float позволяет перемещать любой элемент, выравнивая его по левому или правому краю веб-страницы или содержащего его элемента-контейнера. При этом остальные блочные элементы будут его игнорировать, а строчные элементы будут смещаться вправо или влево, освобождая для него пространство и обтекая его.

Рис. 3. Свободное перемещение элементов

Плавающий блок принимает размеры своего содержимого с учетом внутренних отступов и рамок. Верхние и нижние отступы margin плавающих элементов не схлопываются. Свойство float применяется как к блочным элементам, так и к строчным элементам.

Левый или правый внешний край перемещаемого элемента, в отличие от позиционированных элементов, не может располагаться левее (или правее) внутреннего края его блока-контейнера, т.е. выходить за его границы. При этом, если для блока-контейнера заданы внутренние отступы, то плавающий блок будет отстоят от края блока-контейнера на заданное расстояние.

Свойство автоматически изменяет вычисляемое (отображаемое в браузере) значение свойства display на display: block для следующих значений: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Значение inline-table меняет на table .

Свойство не оказывает никакого влияния на элементы с display: flex и display: inline-flex .

При использовании свойства float для блочных элементов обязательно задавать ширину. Тем самым браузер создаст место для другого содержимого. Но если совокупная ширина всех столбцов окажется больше доступного места, то последний элемент спустится вниз.

При этом вертикальные отступы margin обтекаемых элементов не схлопываются с отступами соседних элементов, в отличие от обычных блочных элементов.

6. Отмена обтекания элементов

6.1. Свойство clear

Свойство clear определяет, как будет располагаться элемент, идущий следом за плавающим элементом. Свойство отменяет обтекание с одной или обоих сторон элемента, установленное свойством float . Для предотвращения отображение фона или границ под плавающими элементами используется правило {overflow: hidden;} .

6.2. Очистка потока стилями при помощи класса clearfix и псевдокласса:after

Предположим, имеется блок-контейнер, для которого не заданы ширина и высота. Внутри него помещен плавающий блок с заданными размерами.

.container { padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; } .floatbox { float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; background: #ffffff; border: 3px dashed #666666; } Рис. 4. «Эффект схлопывания» блока-контейнера

Решение проблемы:
Создаем класс.clearfix и в сочетании с псевдоклассом:after применяем его к блоку-контейнеру.

.container { padding: 20px; background: #e7e6d4; border: 3px dashed #645a4e; } .floatbox { float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; background: #ffffff; border: 3px dashed #666666; } .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

Второй вариант очистки потока:

Clearfix:after { content: ""; display: table; clear: both; }
Рис. 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-right: 20px; background: #ffffff; border: 3px dashed #666666; } li:last-child {margin-right: 0;} Рис. 6. Очистка потока горизонтального списка

Я, как и автор статьи, много до чего добрался в CSS методом тыка, а ещё больше упустил. В особенности времени. И если бы сразу разобрался с принципами таких штук, как позиционирование и обтекание (positioning, float), то простые задачи действительно оказались бы простыми с самого начала. Для этого часто не хватает мест, где бы нам на пальцах объясняли коллизии и аномалии тех языков программирования, которым нас внезапно не обучают с детства. Ну не понятны они нам на интуитивном уровне, чо уж. Да и хэлпы не всегда прочитываются.

Если у вас та же история, то это ваше чтение на вечер.

Одним из откровений, посетивших меня по прочтении, стало понимание работы позиционирования, в особенности — разница между абсолютным и относительным (absolute, relative). Если дочитаете до конца, то будете точно знать — когда и как работает каждое. Здесь всё изложено на примерах списков и картинок.

Пять значений позиционирования

В CSS мы имеем список из пяти значений позиционирования div-ных блочных элементов:

1. Static — статическое.
2. Relative — относительное.
3. Inherit — унаследованное.
4. Fixed — фиксированное.
5. Absolute — абсолютное.

Немного расчитстим дорогу, убрав inherit , просто потому, что это свойство позиционирования в дополнительном разборе не нуждается. Оно говорит элементу наследовать свойства родительского и всё. А в старых версиях Интернет Эксплорера и вовосе не поддерживается.

По умолчанию же, позиционирование выставляется в static . Любой элемент со статическим позиционированием будет там, где его ждут, будучи целиком и полностью зависимымм от структуры HTML.

Теперь fixed . Это такой якорь. Будучи оснащёнными этим значением, элементы останутся там, куда мы их поместим и не сдвинутся с места даже при прокрутке . Это часто используется для фиксации боковых панелей навигации, что конечно ужас для контента.

Так что, с тремя значениями позиционирования мы разобрались и можем считать их понятными. Просто потому, что их функционал не имеет, ни повторений, ни вариаций. Остаются интересности — absolute и relative . Взглянем на них по отдельности, а потом на то, как они могут быть использованы вместе. А ещё на то, какие интересные результаты это может дать.

Абсолютное позиционирование

Абсолютное позиционирование позволяет выдернуть объект из обычного потока документа и сунуть его в конкретную точку на странице. Создадим простой список — unordered list.

• ЧЕТЫРЕ

Как мы знаем, его пункты уже в значении static, автоматом. Это значит то, что они текут себе в потоке других элементов документа там, куда помещены согласно его html-структуре. Теперь посмотрим — что случится, если одному из пунктов списка назначить absolute с нулевыми координатами.

>ul li:nth-child(4){
position:absolute;
left:0; top:0;}

Как видим, он выкидывается из общего потока и размещается в верхнем левом углу окна браузера. Заметим, что абсолютно позиционированному элементу всё равно — есть ли на том месте какой-нибудь другой или нет. Он всё равно будет помещёно согласно координатам.

Итак, абсолютное позиционирование нужно нам тогда, когда требуется поместить элемент именно в том месте экрана, где мы хотим его видеть. Соответственно, отмеряется его положение отступами сверху, справа, снизу и слева границы окна.

Например, поместим тот самый четвёртный пункт списка с отступом в двадцать пикселей слева и двадцать сверху.

ul li:nth-child(4){
position:absolute;
left:20 px; top:20 px;}

Немного сдвинулся вниз и направо. А чтобы подтвердить сказанное о том, что элементу с абсолютным позиционированием нет разницы до расположения других, зададим ему такие координаты, которые обеспечат форменный наезд.

ul li:nth-child(4){
position:absolute;
left:60 px; top:80 px;}

В заключение, отметим поведение остальных пунктов списка. При удалении из потока четвёртого, остальные атоматически подравниваются в очереди так, как будто его там и не было: за третьим сразу идёт пятый. Запомним это, а потом используем в своих интересах.

Относительное позиционирование

Относительное позиционирование работает так же, как и абсолютное — заданием объекту его положения координатами сверху, справа, снизу и слева. Разница лишь в отправной точке: в положении точки нулевых координат. Для абсолютного позиционирования ею был край экрана браузера. А для относительного?

Посмортим:

ul li:nth-child(4){
position:relative ;
left:0 px; top:0 px;}

• ЧЕТЫРЕ

Как так? Четвёртый пункт остался на своём месте в потоке элементов. Всё потому, что отправной точкой для его координат теперь служит не край окна браузера, а предшествующий ему эелемент в потоке. Он же — его родительский.

Теперь, если мы изменим положение нашего подопытного на двадцать пикселей, то наглядно оценим результат таких взаимоотношений.

ul li:nth-child(4){
position:relative ;
left:20 px; top:20 px;}

Этот экстрим бывает полезен в реальных ситуациях. Например, когда мы не хотим выкидывать элемент, а желаем поиграться с его наложением на другие. При этом заметим: относительное позиционирование не заботится о нижних элементах так же, как и абсолютное. Но зато здесь они уже не занимают место выбывшего.

Собираем всё вместе

Теперь, когда мы усвоили базовые правила поведения HTML-элементов с абсолютным и относительным позиционированием через CSS, создадим полноценный и наглядный пример работы всего этого дела.

HTML

Начнём, создав HTML-блок класса «photo» и сразу сунем в него картинку 200×200 пикселей.

Теперь пора перейти к правке нашей CSS.

Базовая CSS

Сначала сменим фон на тёмный. Потом добавим фотке базовые стили: сделаем ей рамку и навешаем теней.

body { background: #69C; }

Photo {
border: 5px solid white;
height: 200px; width: 200px;
margin: 50px auto;

/*сложные, но клёвые тени*/
-webkit-

box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Ну, в общем — вот наша картинка. Ничего особенного, но полигон создан.

Привешиваем полоску скотча

Скажем так: мы хотим создать впечатление того, что фотки прилеплены к стене кусками скотча. Для этого нам потребуется показать то, чему уже научились и прибавить псевдо-элемент.

Во-первых, для создания нашей плёнки, мы используем псевдо-элемент «до» — «:before». Его CSS-настройки скажут быть скотчу высотой в двадцать и длиной в сто пикселей. Да ещё с белым фоном, которому назначена непрозрачность в пятьдесят процентов, плёнка же. Ну и тенюшка, куда без неё.

Photo:before {
content: "scotch";
height: 20px;
width: 100px;

}

Да, тут плёнка так ничего не приклеит, кроме себя самой...

Очевидно то, что у нас проблемы с позиционированием псевдо-элемента. Попробуем исправить положение при помощи относительного позиционирования.

Photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:relative ;
top:0 px; left:0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Здорово. Какой эффект...

Как видим, проблему мы не решили. Ну, раз относительное позиционирование не сработало, то пойдём в противоположном направлении и попробуем абсолютное.

Photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);

position:absolute ;
top:0 px; left:0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

А вот это уже ближе к теме.

Наконец-то скотч принял заказанный вид. Но пока что он скучает в каком-то углу. Сразу напрашивается изменение координат, чтобы подвинуть его туда, куда нам нужно. Но это не решение: лента встанет в определённую точку и начнёт елозить вместе с изменением размера экрана.

Ну что ж, мы попробовали, и relative, и absolute для позиционирования. Но, ни то, ни другое, в качестве решения нас пока не устраивает.

Что дальше? А например то, что рассказ об абсолютном позиционировании элементов не полон. Видите ли, верхний левый угол экрана — это не всегда нулевая точка координат для абсолютно позиционированного элемента. Вместо этого, наш «абсолютный» псевдо-элемент сориентируется по первому нестатичному предку . В данном случае — по фотке.

Что нам с этого? Очень многое: мы можем использовать абсолютное позиционирование для скотча. Но перед этим, должны изменить кое-что у его родителя, у фотки. И раз мы не хотим, чтобы скотч произвольно двигался по фотке в зависимости от разрешения экрана, то применим к ней относительное позиционирование.

Photo {
border: 5px solid white;
height: 200px;
width: 200px;
margin: 50px auto;
position:relative ;

-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}

Photo:before {
content: "scotch";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute ;
top: 0 px; left: 0 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Итак, псевдо-эелемент с абсолютным позиционированием, выбрал точкой отсчёта своих координат верхний левый угол первого из нестатичных предков. А именно — угол фотки, как раз соответствующий этому описанию. Так что скотч будет всегда приклеен к этому углу, даже если изменится размер окна бразузера.

Теперь, когда мы нашли отправную точку, можно сдвинуть скотч к нужному нам месту, настроив левое и верхнее значение. Обратите внимание на отрицательное значение для верхней точки. Взглянув на результат, вы поймёте — зачем. Левое же значение задано так, чтобы отцентрировать ленту по горизонтали. Некто «Мгновенный калькулятор » наглядно покажет — как это рассчитывается.

Photo:before {
content: "";
height: 20px;
width: 100px;
background: rgba(255,255,255,0.5);
position:absolute ;
top: -15 px; left: 50 px;

Webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

Как видим по финальной картинке — комбинирование абсолютного и относительного позиционирования дало нам именно то, что необходимо для реализации задуманного эффекта и для понимания работы этих двух свойств.

А ещё загляните на «Тинкербин». По сути — это такой полезный генератор кодов различных эффектов.

Заключение

Размещение блочных элементов может оказаться действительно сложной задачей без освоения базовых понятий о нём. Однако, нужно держать в памяти всего три вещи, чтобы вовремя применять и комбинировать их параметры.

Первое — это то, что относительное позиционирование позволяет нстроиться относительно конкретной отправной точки. Второе — то, что настроиться можно и относительно первого нестатичного предка, а не только края окна браузера, как это происходит при значении «position: none» . И наконец: ни относительное, ни абсолютное позиционирование объекта не влияет на статические и фиксированные оъекты, его окружающие. Вспомним из начала статьи: абсолютно отпозиционированные элементы удаляются из потока, а относительные занимают чужие позиции.

Примечания

• Несвежие мобилы и таблетки плохо воспринимают параметр позиционирования «fixed» . Вернее не воспринимают. Меню, которому он назначен, катаются по экрану вместе с контентом так, как если бы они были «static» . С появлением iOS 5+ всё нормализовалось, но не раньше.
• То, как всё здесь написанное воспринял, например, седьмой Internet Explorer — даже обсуждать не охота. Ещё меньше было желания думать о том, как хачить под него CSS. Поэтому для упыря я нашлёпал скринов всей красоты и закодил их в HTML конструкциями, типа:

  
  Сюда тупо скрин для Эксплорера.
  

  
  А сюда полноценный код для нормальных браузеров.
  

  Так что, если не лень накидать своих решений чисто по CSS, то каменты к вашим услугам. Спасём мир.