Позиционирование CSS. Позиционирование HTML элементов в CSS при помощи свойства position (absolute, relative, fixed, static)

Я, как и автор статьи, много до чего добрался в 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, то каменты к вашим услугам. Спасём мир.

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о CSS-свойствах position и float .

1. position: static

По умолчанию все элементы на странице имеют статическое позиционирование (position: static), это означает, что элемент не позиционирован, и появляется в документе на своем обычном месте, то есть в том же порядке, как и в html-разметке.

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

#content{ position: static; }

2. position:relative

Относительное позиционирование (position: relative) позволяет вам использовать свойства: top, bottom, left и right, для расположения элемента относительно того места, где бы он появился при обычном позиционировании.

Давайте переместим #content на 20 пикселей вниз, и на 40 пикселей влево:

#content{ position: relative; top: 20px; left: -40px; }

Обратите внимание, что на том месте, где бы должен был находится наш блок #content, теперь образовалось пустое пространство. Следующий за блоком #content, блок #footer не переместился ниже, потому что, #content по-прежнему занимает свое место в документе, несмотря на то, что мы передвинули его.

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

3. position: absolute

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

Давайте, для примера, переместим блок #div-1a в верхний, правый угол страницы:

#div-1a { position:absolute; top:0; right:0; width:200px; }

Обратите внимание, что на этот раз, поскольку блок #div-1a был удален из документа, оставшиеся элементы на странице расположились по-другому: #div-1b, #div-1c и #footer переместились выше, на место удаленного блока. А сам блок #div-1a, расположился точно в правом, верхнему углу страницы.

Таким образом, мы можем позиционировать любой элемент относительно страницы, однако этого не достаточно. На самом деле, нам необходимо позиционировать #div-1a относительно родительского блока #content. И на этом этапе, относительное позиционирование вновь вступает в игру.

4. position: fixed

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

#div-1a { position:fixed; top:0; right:0; width:200px; }

В IE с position: fixed не все так гладко, как бы нам хотелось, но существует множество способов обойти эти ограничения.

5. position:relative + position:absolute

Назначив блоку #content относительное позиционирование (position: relative), мы сможем позиционировать любые дочерние элементы, относительно его границ. Давайте разместим блок #div-1a, в верхнем правом углу блока #content.

#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; }

6. Две колонки

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

#content { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

Одним из преимуществ абсолютного позиционирования, является возможность размещать элементы в произвольном порядке, независимо от того, как именно они расположены в разметке. В приведенном выше примере, блок #div-1b расположен перед блоком #div-1a.

А сейчас у вас должен был возникнуть вопрос: “А куда же делись остальные элементы из нашего примера?”. Они скрылись под абсолютно расположенными блоками. К счастью, есть возможность это исправить.

7. Две колонки с фиксированной высотой

Одно из решений – задать фиксированную высоту контейнеру, содержащему колонки.

#content { position:relative; height: 450px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; }

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

8. Float

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

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

#div-1a { float:left; width:200px; }

9. “Плавающие” колонки

Если назначить первому блоку float: left, а затем второму float: left, каждый из блоков прижмется к левому краю, и мы получим две колонки, с переменной высотой.

#div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; }

Также, можно назначить колонкам противоположное значение float, в этом случае, они распределятся по краям контейнера.

#div-1a { float:right; width:150px; } #div-1b { float:left; width:150px; }

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

10. Очистка float

Чистку флоатов можно делать двумя способами. Если после колонок идет еще один блок, достаточно назначить ему clear: both.

#div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; }

Или же назначить родительскому контейнеру свойство overflow: hidden

#content { overflow:hidden; }

В любом случае, результат будет один и тот же.

Заключение

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

И left , они позволяют произвести смещение позиционированного элемента относительно определенного края. Ниже в примере рассмотрены возможные типы позиционирования элемента:

  1. position : relative (элемент с относительным позиционированием). При использовании свойства left позиционированный элемент смещается относительно его текущей позиции (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left: 200px;
  2. position : absolute (элемент с абсолютным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края его предка (отрицательное значение смещает элемент влево, положительное значение вправо), при этом предок должен иметь значение position отличное от установленного по умолчанию - static , иначе отсчёт будет вестись относительно левого края окна браузера (как при значении position fixed ). На примере left : 40px .
  3. position : fixed (элемент с фиксированным позиционированием). При использовании свойства left позиционированный элемент смещается относительно левого края окна браузера (отрицательное значение смещает элемент влево, положительное значение вправо). На примере left : 40px .
  4. position : static (элемент со статическим позиционированием - является значением по умолчанию). Значение свойства left не повлияет на позиционирование элемента.

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

Поддержка браузерами

Свойство
Opera
IExplorer
Edge
position 1.0 1.0 4.0 1.0 7.0 12.0

CSS синтаксис:

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

JavaScript синтаксис:

Object.style.position = "absolute"

Значения свойства

Значение Описание
absolute Абсолютное позиционирование. При смещении элемент сдвигается относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static , иначе отсчёт будет вестись относительно, указанного края окна браузера (как при position : fixed ).
fixed Фиксированное позиционирование. При смещении элемент сдвигается относительно заданного края окна браузера.
static Статическое позиционирование. Элементы отображаются в том порядке, как они указаны в потоке HTML документа. Это значение по умолчанию.
relative Относительное позиционирование. При смещении элемент сдвигается относительно его текущей позиции.
Устанавливает свойство в значение по умолчанию.
Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

Пример использования свойства position

h1{position:static;}

div position:relative;
div position:absolute;
div position:fixed;

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

Свойство 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. Этот элемент будет служить точкой отсчёта. Если он не найдёт элемент с позиционированием, то будет ориентироваться относительно документа.

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

    Однако прежде чем стать опытным верстальщиком, каждый новичок проводит уйму времени, изучая различные инструкции и спецификации как по языку HTML, так и по его союзнику - CSS. Именно о том, для чего он нужен и какие «финты ушами» позволяет вытворять, а также об одном из его популярных свойств - Position Relative - мы сегодня и поговорим.

    Что такое CSS?

    Аббревиатура CSS может быть расшифрована и переведена на русский язык как «каскадные таблицы стилей». Звучит довольно странно - с одной стороны, вроде и слова понятные, а с другой - общий смысл улавливается далеко не сразу. Начнем с простого - со стилей. Данная технология позволяет придавать объектам на странице определенные характеристики, касающиеся внешнего вида, которые можно прописать лишь однажды, а использовать бесконечное количество раз.

    Слово «таблицы» в официальном переводе оказалось практически случайно - на самом деле уместнее здесь было бы употребление слова «листы» или «списки», тем не менее авторы первоначального перевода решили, что на таблицу CSS похож больше, чем на список, и кто мы такие, чтобы теперь их судить.

    Наконец, слово «каскадные». Дело в том, что каждый элемент может иметь сразу несколько стилей, которые могут смешиваться или даже пересекаться. В подобных случаях браузеру приходится прибегать к ряду правил, дабы правильно скомпоновать внешний вид блока, у которого оказалось несколько стилей, при этом один из них, например, имеет свойство Position Relative, а другой - Position Absolute. На самом деле подобные конфликты допускать нельзя, но в крупных проектах подобная путаница происходит довольно часто.

    Итак, теперь, когда с названием все понятно, давайте рассмотрим один простой пример. Допустим, на вашем сайте должно быть большое количество кнопок, оформленных определенным образом. У них есть такие свойства, как размер, тень, прозрачность, цвет. Конечно, можно указывать данные параметры, создавая каждую кнопку, но гораздо проще будет использовать CSS. На практике вам необходимо описать некий класс, в котором будут перечислены значения всех вышеупомянутых свойств, а затем, вместо длинного перечисления, в теге каждой кнопки нужно будет лишь указать имя этого класса, после чего браузер сам покрасит эти элементы в нужные цвета и придаст им должный «лоск».

    Для чего нужно свойство Position?

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

    Какие значения может принимать свойство Position?

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

    • Position Inherit. Данное свойство позволяет скопировать данные о позиции у элемента, являющегося родительским. Например, если у вас есть div с указанным Position Relative, то вписанный в него IMG со значением inherit также получит значение Relative.
    • Position Static. Данное значение придается всем элементам автоматически, если не указано какое-либо другое. Элементы вписываются в позицию по мере упоминания в коде и недоступны для различных «изысков», позволяющих менять их положение.
    • Position Absolute. К этому значению свойства Position довольно часто прибегают в тех случаях, когда необходимо создать «плавающий» элемент. Обладая данным значением свойства, элемент остается «невидимым» для остальных составляющих страницы. То есть они располагаются так, словно нашего абсолютного элемента вовсе не существует. Сам же он будет всегда оставаться на месте, вне зависимости от того, как далеко была прокручена страница.
    • Position Fixed. Во многом это значение похоже на предыдущее, однако, в то время как абсолютный элемент привязывается к родителю, фиксированный использует исключительно координаты верхнего левого угла экрана браузера, не обращая внимания на остальные элементы, которые ему предшествовали.
    • Наконец, Position Relative. Данный тип значения позволяет располагать элемент относительно остальных, что может быть полезно при создании адаптивной разметки, называемой в простонародье «резиновой». Имея данное свойство, элемент будет «раздвигать» остальные, не теряя возможности менять свое расположение на странице.

    Особенности работы с Position в различных браузерах

    Не все браузеры одинаково совместимы. В то время как большинство альтернативных программ для интернет-серфинга без каких-либо заминок воспринимают значение Position абсолютно верно, «хронически особенный» Internet Explorer рассматривает данное свойство в зависимости от своей версии.

    Например, используя уже «похороненный» браузер IE6, вы не сможете использовать значения Fixed и Inherit - «ослик» их попросту проигнорирует. Впрочем, несмотря на то, что с седьмой версии ситуация начала исправляться, и Fixed уже обрабатывался, до Inherit всеми любимый «браузер для скачивания других браузеров» добрался только в своей восьмой ипостаси.

    Остальные же обозреватели спокойно обрабатывают Position с первых версий, за исключением Opera, которая обзавелась поддержкой данного свойства в своей 4 вариации, вышедшей в середине 90-х.

    Работа с Position в Javascript

    На самом деле рассказ о том, как следует работать со свойством Position в Javascript, мы включили лишь ради приличия. Так как данное свойство не обладает какими-либо спецсимволами в названии, использовать JS можно без каких-либо изменений, например, чтобы задать для div Position Relative, следует включить такую строку: div.style.position = ‘relative’.

    Как видите, все довольно просто.

    Почему Position Relative заслуживает особого внимания?

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

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

    Когда следует использовать относительное позиционирование?

    Помимо верстки обычных страниц Relative часто применяется для создания различных интересных эффектов. Например, если вы хотите, чтобы какой-либо элемент «приезжал» на страницу или же, наоборот, плавно отправлялся за ее края, то именно данное свойство может помочь вам реализовать этот «финт».

    Подобные «трюки» реализуются через Javascript, либо, если вы стремитесь к прогрессивной верстке, через свойства CSS3, которые позволяют настраивать цикличное изменение значения той или иной переменной.

    Кроме того, в некоторых случаях возможно создание «гибридных» значений Position Relative. CSS хоть и не позволяет одновременно задать нечто вроде position: absolute relative, но, используя некоторые хитрости, все-таки можно добиться данного эффекта. Этот подход может пригодиться в тех случаях, когда необходимо создать что-либо вроде сложной или контекстного меню. Рассматривая примеры, мы обязательно приведем описание структуры подобного «гибрида».

    Примеры использования относительного позиционирования

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

    Начнем с «выбегающей» строки. Предположим, у вас возникла необходимость в элементе, который будет «выезжать» из-за левого края экрана и постепенно двигаться к его правой стороне. Чтобы реализовать подобный «механизм», следует установить position: relative; left: -100px, где -100 - примерное число пикселей, составляющих ширину блока. Подобный стиль позволит вам спрятать блок за пределами экрана, установив его на «стартовую позицию». Теперь можно использовать скрипт, который будет каждые несколько миллисекунд наращивать значение свойства left на единицу до тех пор, пока оно не станет равным ширине окна браузера минус ширина элемента. В результате мы получаем блок, который появляется из-за левого края, прокатывается через весь экран и «паркуется» у его правой стороны.

    Другой пример позволяет создавать «относительно-абсолютные» элементы. Например, вы можете вписать абсолютный внутрь другого, имеющего Position Relative. В результате у нас есть «относительный» блок, не имеющий размера, в который вписан абсолютный, способный теперь проявляться в позиции, зависящей от предшествующих ему элементов.

    Типичные ошибки при использовании Position Relative

    Наиболее распространенной ошибкой при использовании Position Relative является то, что многие верстальщики забывают о способности резервировать место под блок, который может находиться где угодно. Например, если у вас есть довольно крупный, размещенный за пределами экрана и имеющий относительное позиционирование, на его месте будет зиять «дыра». Впрочем, даже это свойство, иногда создающее определенные неудобства, можно использовать во благо, например, создавая интересный эффект «самособирающегося» сайта, в котором все его блоки постепенно помещаются на позицию top: 0; left: 0; т. е. на свое оригинальное место.

    Похожие статьи