На позиции по умолчанию для. Свободное перемещение элементов. Position relative — относительное позиционирование

Свойство position распространяется на все элементы и может иметь одно из пяти возможных значений:

• static
• relative
• absolute
• fixed
• inherit

position:static

Из раздела 9 :

Данный блок является обычным блоком, позиционируемым в соответствии с нормальным потоком. Свойства "top ", "right ", "bottom " и "left " не применяются.

этом примере :

• Второй блок отображается там же, где бы он отображался без определения position
• Значения задаваемые для top не используются, поскольку для блоков с "static" значение всех смещений всегда "auto"

Что следует помнить:

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

position:relative

Из раздела 9 Модель визуального форматирования :

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

На что следует обратить внимание в этом примере :

• Блок "два" смещён ниже на 300 пикселей, но блок "три" и его содержимое остались на месте. Выглядит как будто содержимое блок "два" съехало со страницы, оставив свой след. Это выглядит так, потому что "relative" (относительное) позиционирование не нарушает нормальный поток .
• Блок с относительным позиционированием накладывается на следующие элементы и отображается перед другими блоками.

Что следует помнить:

• Вычисленные значения всегда left = -right и top = -bottom. Если контейнер блока имеет значение direction равное ltr , то используется значение "left", а "right" = -left. Если direction контейнера блока имеет значение равное rtl , то используется значение "right", а "left" игнорируется.
• В отличии от "absolute" (абсолютной) модели, свойства top , right , bottom и left ни могут растянуть или сжать блок, они не могут влиять на его размер.

position:absolute

Из раздела 9 Модель визуального форматирования :

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

На что следует обратить внимание в этом примере :

• В связи с тем, что смещение не указано, блок "два" не перемещён относительно своей нормальной позиции, но если бы мы использовали, например: top:0;left:0; блок находился бы в левом верхнем углу окна просмотра .
• Макет отображается так, как если бы блоку "два" присвоили стиль: display:none . Блок был удалён из потока .
• С блоком "два" удалённым из поток, блок "три" переместился вслед за блоком "один" (параграфы последовали за ним).
• Как и все элементы удалённые из потока, блок "два" был сжат по горизонтали.

Что следует помнить:

• Для любого элемента с позиционированием "absolute" или "fixed" вычисляемое значение display:block .
• "Содержащий блок" это блок который определяет позиционирование контекста. Оно устанавливается ближайшим предком с "position" установленной в "absolute" , "relative" или "fixed" . Это означает, что родительский блок может и не быть содержащим блоком .
• Положение по умолчанию, абсолютно позиционируемого блока, не всегда бывает в стиле top:0;left:0; (в LTR контексте), на это есть две причины:

1. В содержащем блоке позиционирование блока определяется позиционированием ближайшего предка , если такового нет, то указанный контейнер является корневым элементом. Содержащий блок в котором расположен корневой элемент это прямоугольная область называемая начальным содержащим блоком. Для устройств без разбивки страниц он имеет размер области просмотра(окна или другой области просмотра на экране) и он прикреплён к странице. В этом примере показан блок позиционируемый относительно видимой области (по умолчанию, содержащий блок).
2. Элемент позиционируемый относительно отступов блока, а не содержимого блока и не бордюра содержащего блока . Этот новый пример демонстрирует где находился бы блок "два" если бы границы отступа блока не касались границы содержимого блока (содержащий блок - элемент body ).

Размер окна может быть определён значениями свойств: top , right , bottom и left . Например обнуление этих свойств сделает блок растянутым по размеру видимой области. Обнуление всех смещений блока (Примечание: в IE6 блок не растянется)

Для создания маски наложения, которая не прокручивается вместе с документом (как в предыдущем примере) можно использовать либо fixed фиксированное позиционирование вместо absolute абсолютного, либо установить стиль body в position:relative как начального блока позиционирования области просмотра (стиль элемента html не работает в IE). Пример наложения .

position:absolute запускает haslayout .

Самое главное, что следует помнить:

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

position:fixed

Из раздела 9 Модель визуального форматирования" :
Фиксированное позиционирование является под категорией абсолютного позиционирования. Разница в том, что при фиксированном положении блока, содержащий блок определяется областью просмотра. Для устройств без разбивки фиксированные блоки не перемещаются при прокрутке документа. В этом отношении они похожи на фиксированные фоновые изображения. Для устройств с постраничной разбивкой блоки с фиксированным положением повторяются на каждой странице. Это удобно для размещения подписей внизу каждой страницы. Блоки, которые больше чем область страницы обрезаются. Части блока с фиксированным позиционированием, которые не видны в начальном содержащем блоке, не будут напечатаны.
На что следует обратить внимание в примере :

• В связи с тем, что фиксированное позиционирование является под категорией абсолютного позиционирования, то всё, что было верно для "absolute" , так же верно и для "fixed" (элемент сжимается по горизонтали, удаляется из потока и т.д.)
• Блок позиционируется относительно видимой области и не прокручивается вместе со страницей.
• В IE6, блок отображается как "static" блок , но есть "забавный" обходной путь для этого.
• При печати документа, блок "два" отобразится на каждой странице.

Что следует помнить:

• Положение блока рассчитывается в соответствии с "absolute" моделью, но кроме этого блок фиксируется относительно некоторой ссылки. В случае использования следующих медиа типов: handled , projection , screen , tty и tv блок фиксируется относительно видимой области и не перемещается при прокрутке.
• Содержание блока может быть не доступным для просмотра пользователями, если оно находится за пределами видимой области.
• В случае использования медиа типа "print" , авторы могут не хотеть что бы элемент отображался на каждой странице. Тогда лучше использовать следующие правили для @media :

@media print { #logo {position: static;} }

Как и position:absolute , position:fixed запускает haslayout в EI.

position:inherit

Если для блока указан position:inherit , то он будет принимать такие же вычисленные значения свойств как и его родительский блок.
Обратите внимание, что IE6 и IE7 не поддерживают это значение, кроме тех случаев когда используется direction и visibility (см )

Что следует помнить:

Смещение блока
Помните, что при абсолютном и фиксированном позиционировании блоков, значения установленные в процентах для top , right , bottom и left вычисляются в соответствии с размерами содержащего блока (который может быть не родительским блоком)
"position" и "overflow"
Блок со стилем overflow:hidden будет обрезать элементы с относительным позиционированием (вложенные блоки), но никогда не будет скрывать блоки с абсолютным позиционированием. Это связано с тем, что родительский блок не всегда является содержащим блоком (ближайшего предка с "position" установленной в "absolute" , "relative" и "fixed" ).
Это означает, что элементы с абсолютным позиционирование отобразятся вне блока со стилем overflow:hidden если этот блок не является содержащим блоком или внутренним элементом указанного блока. Данный пример показывает как это работает.
Поля
Авторы могут использовать поля элементов вне зависимости от схемы их позиционирования.
В случае с IE
В IE позиционирование блока может быть благословением или проклятием:

• В IE6, position:relative (с haslayout ) могут быть использованы отрицательные поля для предотвращения обрезания блока родительским контейнером (пример демонстрирующий решение этой проблемы).
• Позиционированный элемент может "мешать" расположению блоков в IE6 и 7 и может создавать наложение содержимого (пример)

Порядок наложения и уровень наложения

• В соответствии с последовательностью исходного кода, позиционированные блоки могут выплывать перед блоками расположенными в нормальном потоке.
• Авторы могут указывать уровень наложения через свойство "z-index" , только на позиционированные блоки.
• В IE6 и 7, просто факт позиционирования может вызывать наложение контента (пример см. выше).

Аналогия с призраками DrLangbhani:

Элемент с относительной позицией всегда смещён относительно своего нормального положения в потоке. Другими словами, он смещён относительно того места где был бы при нормальных обстоятельствах и его смещение не влияет на положение элементов расположенных вокруг него. Это как призрак, который покинул своё тело. Тело, которое имеет ширину, высоту и оказывает влияние на окружение, но невидимо. Призрачные блоки в могут перемещаться, но всё ещё связаны со своим телом и его позиция по прежнему измеряется от него. Теперь элемент с абсолютным позиционированием, с ним ещё проще. Он больше не влияет на своё окружение (он вырван из потока). Он как настоящий призрак без тела. Что касается, родственных элементов, то он их больше не беспокоит, как если бы его не существовало. Что бы узнать свое положение он просматривает каждого предка пока не найдёт элемент с position:relative или position:absoluter. Этот элемент будет служить точкой отсчёта. Если он не найдёт элемент с позиционированием, то будет ориентироваться относительно документа.

Свойство 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 "

Здравствуйте, уважаемые читатели блога сайт. Сегодня мы поговорим о принципах позиционирования Html элементов с помощью CSS правил Position (со значениями absolute, relative и fixed) и свойств, задающих смещение left, right, top и bottom. Видите звездочку в левом нижнем углу? Дочитав статью до конца, вы узнаете как она туда попала.

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

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

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

У него имеется четыре возможных значения (static | relative | absolute | fixed). Откуда мы это можем узнать? Ну, конечно же, из спецификации , которая выложена на официальном сайте :

По умолчанию используется значение position: static . Т.е. в нормальном потоке два CSS правила, способных его разорвать, имеют значения по умолчанию static и float:none. Как только одно из этих значений изменится — нормальный поток Html кода в этом месте будет нарушен, потому что теперь этот тег может совершенно по-другому взаимодействовать со своими соседями или вообще даже не взаимодействовать.

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

По умолчанию для всех четырех используется значение Auto. Когда мы прописываем для какого-либо тега правило position: relative, то значения отступов со всех сторон сбрасываются в ноль и вам предоставляется возможность самим задать их.

Нужно понимать как задаются отступы . Например, left: 400px означает отступ от левой стороны вправо на соответствующую величину, а top: 100px — от верхней стороны вниз. Если укажите отрицательные значения Left, right, top и bottom, то элемент будет двигаться в противоположную сторону (например, top — наверх, а Left — влево).

Давайте рассмотрим использование relative для плавающего элемента. Пусть у нас имеются два Div контейнера, которые мы подкрасим для наглядности разным цветом фона с помощью .

Первый контейнер мы изначально заставим плавать влево с помощью соответствующего свойства, а т.к. он будет пустой, то мы зададим ему (и отступы с помощью margin):

В результате мы получим примерно такую картину маслом:

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

Теперь давайте добавим к CSS правилам для первого контейнера position: relative и зададим отступы слева и сверху с помощью Left и top:

В результате мы увидим, что наш плавающий элемент сдвинулся в соответствии с заданными отступами:

Обратите внимание, что текст по-прежнему продолжает его обтекать так, как будто бы он все еще стоит на своем месте. Т.е. многие Html теги при своем построении считают, что он находится на своем законном месте (без учета заданных нами в правилах Left и top сдвигов).

Но так будут делать не все тэги, иначе бы мы не увидели никаких изменений. Ближайший предок с прокруткой (в нашем случае это будет тег Html, т.е. фактически область просмотра) эти изменения заметит.

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

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

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

Но сначала посмотрим на эту конструкции еще без добавления «position: absolute». При этом для подчеркивания строчности Span добавим ему высоту, которая все равно не применится, а CSS код на сей раз добавим для разнообразия не через внутри конструкции Head:

Для Div мы еще и отступ слева задали в 100px. Ну, а теперь посмотрим, что же изменится, если мы зададим нашему строчному тэгу Span абсолютное позиционирование путем добавления CSS правила position absolute :

#abs span{ background:#C0FFC0; height:100px; position:absolute; }>

Произошло странное. Судя по тому, что к Span применилось свойство height:100px — он перестал быть строчным тегом. Потом у нас, очевидно, состыковались друг с другом фрагменты «первое» и «третье», как будто бы элемента со словом «второе» между ними уже не существует. Именно так и работает абсолютное позиционирование в CSS.

Но давайте разберем все по пунктам при задании элементу свойства «position: absolute» :

1. Тег, для которого прописывается это правило, становится блочным
2. Размеры этого блока будут определяться содержащимся в нем контентом (если вы не зададите их явно с помощью width и height).

Также как и для плавающих элементов (с прописанных Float), в случае применения к тегу «position: absolute», эффект Margin-colloapse для таких тэгов проявляться не будет. Т.е. ему никто не сможет передать свои вертикальные отступы и он никому передать их не сможет тоже (ни с кем не делится вертикальными отступами).

Если вы вспомните предыдущую статью из рубрики « », то увидите, что все эти три пункта наблюдались и при создании плавающих элементов с помощью Float.

Поэтому, если для какого-либо тега уже было задано Float, но затем для него же прописали «position: absolute», то первое браузером (именно он отвечает за разбор кода) сбрасывается в None (значение по умолчанию), ибо нет смысла реализовывать две одинаковых модели.

3. Тег с прописанным «position: absolute» не взаимодействует ни с какими другими элементами Html кода кроме ближайшего родителя с прокруткой. Все остальные теги в коде элемент с абсолютным позиционированием просто-напросто не замечают (и это видно из нашего примера)

Это все хорошо, но ведь с помощью «absolute» мы должны осуществлять абсолютное позиционирование. Ну, собственно, это так и есть на самом деле. В купе с ним мы можем использовать все те же четыре CSS правила: Left, right, top и bottom. Как они будут работать при абсолютном позиционировании?

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

А само понятие контейнера для абсолютно спозиционированных элементов будет отличаться от общепринятого. Из предыдущих статей вы, наверное, помните, что контейнером для тега Html является область просмотра, а для всех остальных — область контента родителя. У тэга с прописанным position absolute это будет не так.

Контейнер при абсолютном позиционировании мы сможем назначать сами (им будет первый из предков, у которого значение position отличается от static , используемого по умолчанию).

Допустим, если мы задали только абсолютное позиционирование, но не прописали никаких значений для правил Left, right, top и bottom, то для них будет использоваться умолчательное значение Auto и такой элемент останется стоять на своем месте (как и у нас на последнем скриншоте). Тут должно быть все понятно.

В CSS используется структура предков и потомков, о которой я уже довольно подробно писал в статье про . Наша задача, при определении контейнера для тега с абсолютным позиционированием, будет заключаться в поиске предка с position, имеющим значение отличное от static (т.е. когда это было явно задано).

В нашем примере ни одному из предков тега Span мы не прописывали position, поэтому дойдя до самого верха (тэга Html) мы на этом и остановимся. Давайте зададим нулевые отступы для рассмотренного чуть выше примера и убедимся в своей правоте:

#abs span{ background:#C0FFC0; height:100px; position:absolute; left:0; top:0; }>

В итоге абсолютно спозиционированный тег прижался к нулевой точке отсчета области просмотра. Но мы вольны сами выбирать контейнер для элемента с прописанным position absolute . Как же это можно сделать?

Связка position absolute и relative в Div верстке

Ну, а почему бы для этого не использовать CSS правило «position: relative». Пропишем его в нужном теге предка (который станет в итоге контейнером для абсолютно спозиционированного элемента), а значения Left, right, top или bottom прописывать не будет, тем самым, фактически, вообще не внеся никаких изменений в положение данного предка (он останется в нормальном потоке), но назначив его контейнером и началом отчета для нашего абсолютного позиционирования.

Если мы пропишем «relative» для тега Body, то наша картинка чуть-чуть изменится:

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

А теперь давайте в дополнение к уже проделанному пропишем «position: relative» и для контейнера Div, внутри которого и живет тег Span:

Как видим, картина поменялась. Несмотря на то, что relative прописано и для Body, и для Div, контейнером для абсолютно спозиционированного Span стал именно Div, т.к. он является первым предком , у которого значение position отлично от static.

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

#abs{ background:#FFC0C0; margin-left: 100px; position: relative; border:12px dotted #ccf; padding:20px; }

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

Отступы (смещение) Left, right, top и bottom можно задавать не только в абсолютных единицах (читайте про ), но и в процентах, которые будут браться от ширины (left и right) и высоты (top и bottom) полученного контейнера. Т.е. «top:100%» будет соответствовать 100% высоты контейнера, а «left:100%» — 100% от его ширины.

И именно описанное выше взаимодействие я имел в виду, говоря про связку position absolute и relative . У нас благодаря этому появляется возможность самим выбирать контейнер или же, другими словами, точку отсчета при абсолютном позиционировании. Для чего же на практике используют эту связку?

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

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

Для выпадающего меню делают примерно следующее. При наведении курсора мыши (задается в CSS с помощью ) на корневой пункт меню появляется абсолютно спозиционилованный с помощью «absolute» элемент (вложенные пункты меню, созданные на основе ). Появляется этот выпадающий список рядом с корневым пунктом меню по той простой причине, что в нем прописан position: relative. Все.

Position fixed — привязка к области просмотра

Последним способом позиционирования является «position: fixed» . Рассмотренные ранее способы были рассчитаны на размещение относительно каких-либо элементов Html кода. Но если мы начинаем прокручивать страницу, то и ее теги (даже имеющие абсолютное или относительное позиционирование) перемещаются вверх (или вниз).

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

Для тэга с прописанным position:fixed контейнер никто не ищет, ибо им является сама область просмотра. Именно в этом заключается отличие от «absolute», а все остальное у них совпадает. Блоки с фиксированным размещением при прокрутке страницы ведут себя так, как будто это элементы интерфейса окна вашего браузера (они всегда под рукой).

Таким образом реализуются, например, панели инструментов, выпадающие панели с возможностью оставить отзыв и т.п. вещи. В качестве примера на этой странице я задал position: fixed для маленькой картинки в левом нижнем углу вашего экрана (области просмотра):

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

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

");">

Вам может быть интересно

Позиционирование с помощью Z-index и CSS правило Cursor для изменения курсора мыши
Float и clear в CSS - инструменты блочной верстки
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка

Они работают со всеми позиционированными элементами, кроме статических.

Пример позиционирования.

Элементы могут перекрывать друг друга!

Отображение элемента над остальными!

Свойство position имеет 4 значения: static , fixed , relative и absolute . Каждое из этих значений будет продемонстрировано ниже с примером использования.

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

Поток документа

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

С помощью свойства float или position можно убрать элемент из нормального потока. Если элемент "выпадает" из нормального потока, то элементы, которые расположены в коде ниже этого элемента будут смещены на его место на веб-странице.

Статическое позиционирование

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

При применении CSS свойств top , left , right или bottom к статически позиционированному элементу, они будут игнорироваться.

Если есть необходимость, то можно задать статическое позиционирование в таблице стилей с помощью значения static:

Первый абзац.

Второй абзац.

Попробовать »

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

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

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

Текст
 Текст
 Текст
 Текст
 Текст
 Текст
 Текст
 Какой-то текст
 Текст
 Текст
 Текст
 Текст
 Текст

Попробовать »

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

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

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

Заголовок первого уровня.

Относительно позиционированный заголовок.

Заголовок третьего уровня.

Попробовать »

Примечание: элементы с относительным позиционированием (relative) обычно используют в качестве родителя для элементов с абсолютным позиционированием (absolute).

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

Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства top , left , right или bottom .

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

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

Попробовать »

Перекрывающие элементы

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

Для вёрстки страниц часто используются два основных инструмента — позиционирование (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. Очистка потока горизонтального списка