Боязнь абсолютного позиционирования в CSS

Иллюстрация к статье «Боязнь абсолютного позиционирования в CSS»

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

По каким примерам вы знакомились с ним? Расположить отдельный div слева (справа/сверху/снизу/в центре) окна браузера над основной страницей? И где это можно применить, кроме как для fucking pop-up banners и всплывающих форм регистрации (использование для выпадающих меню, предполагает небольшую продвинутость HTML-кодера в этой теме)? Немного полезного применения? Вот именно.

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

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

Краткая теория

Итак основа основ, с которой все знакомы, это то, что div с применённым к нему свойством position: absolute, вырывается из обычного потока документа и может быть расположен в любом месте окна браузера (или родительского узла) с помощью CSS-свойств top, right, bottom, left.

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


Пример абсолютного позиционирования в CSS

И код (CSS):

<div id="box">
	<div id="one"></div>
	<div id="two"></div>
	<div id="three"></div>
	<div id="four"></div>
</div>

CSS:

#box {
	width: 350px;
	height: 150px;
	border: 2px solid #000;
	position: relative;
}
#one, #two, #three, #four {
	width: 50px;
	height: 50px;
	position: absolute;
}
#one {
	top: 0;
	left: 0;
	background: #ffde00;
}
#two {
	top: 0;
	right: 0;
	background: #00ff18;
}
#three {
	bottom: 0;
	left: 0;
	background: #006cff;
}
#four {
	bottom: 0;
	right: 0;
	background: #f00;
}

Теперь, разобравшись с примером выше, и подключив ещё 3d-позицию с помощью z-index и отрицательные отступы, то можно творить настоящие чудеса в верстке.

Рабочий пример

Вот, что недавно использовал сам в работе (ссылки на «живой» пример нет, потому что проект ещё в работе):


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

Что может быть лучше и легче для понимания (и кроссбраузерности), чем абсолютное позиционирование и PNG-изображения с полупрозрачными тенями? Баг с PNG-прозрачностью в IE6 фиксим так.

Для желающих разобраться самостоятельно небольшой кусочек «живого» примера. В примере ещё не реализована поддержка min-width для IE6 с помощью expression, поэтому просьба не пинать за это. Если возникли вопросы, спрашивайте в комментариях.

Ещё один вариант использования абсолютного позиционирования можно увидеть в статье «карты изображений на CSS».

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

* * *

Напомню, что продолжается акция «Давайте знакомиться!». У вас есть шанс получить ссылку и попасть в мой RSS-ридер!

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

Постовой:

Google Chrome — тема для WordPress-блогов. Сравнение Drupal и XOOPS для любителей open-source CMS. Обратите внимание на новый легковесный JavaScript-framework «js-core». Что же такое twitter? Хорошее объяснение для непосвящённых.

Ну и просто спасибо Какуниной Татьяне. Приятно, когда на тебя обращают внимание симпатичные девушки :)

Никого не забыл? Если что — отписываемся в комментариях тут.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 40

  1. Octane, 01.10.2008 в 3:11

    Кстате, если в IE6 не указать ширину для абсолютно позиционированного блока и задать одновременно:

    #foo { right: 0; left: 0; }

    То ширина блока будет рассчитана относительно контета, а не занимать 100% ширины родительского relative-блока, как в нормальных браузерах.

    А еще размеры заданные в относительных единицах в IE6 рассчитываютс относительно родительского, а не relative-контейнера.

    Вот из-за таких всяких особенностей, неопытные верстальщики и бояться «position: absolute;» :-)

    p.s. добавьте неразрывный пробел в метке «не публикуется», а то в «Opera Mini» напротив этого поля написано «публикуется» :D

    Ответить

  2. rotor, 01.10.2008 в 9:55

    Octane, как всегда, спасибо за грамотные дополнения.

    В IE6 ещё посоветую всегда использовать явное указание размещения (top/right/bottom/left), потому что он иногда ведёт себя странно, и вместо верхнего левого угла (top: 0; left: 0 — по умолчанию в большинстве браузеров), абсолютный блок может оказаться в совершенно непредвиденном месте или вобще не отобразиться.

    Ответить

  3. Kshadoo, 01.10.2008 в 14:56

    Большое спасибо, пост очень полезный.

    Пишите еще :)

    Ответить

  4. Dimox, 01.10.2008 в 15:47

    Я очень люблю абсолютное позиционирование и постоянно его использую, как правило, в следующих случаях:

    1) когда верстаю шаблон для блога, то все элементы «шапки» делаю абсолютными.

    2) в некоторых случаях при создании блоков с закругленными углами.

    В IE6 ещё посоветую всегда использовать явное указание размещения (top/right/bottom/left)

    Я всегда придерживаюсь этого правила, а также никогда не использую одновременно left и right.

    Кстати, когда я стал верстать знакомому дизайнеру, который ранее верстал сам, то он испугался, когда увидел, сколько раз в стилях я использую position: absolute :), сказал, что это свойство ведет себя непредсказуемо. Но у меня все под контролем =)

    Ответить

  5. Евгений, 02.10.2008 в 0:48

    Когда-то давно заметил некоторую особенность при абсолютном позиционировании в IE 6: при позиционировании right и bottom, если изменяется размер родителя (к примеру, меняем размер окна), то в определенных состояниях появляется погрешность в 1px. Может кто-нибудь может прокомментировать подобное поведение?

    Ответить

  6. Мир CSS » Абсолютное позиционирование — зло, 02.10.2008 в 8:03

    [...] Абсолютное позиционирование — зло Окт2 Читаем об этом у rotorweb.ru [...]

    Ответить

  7. Dimox, 02.10.2008 в 11:46

    Евгений, меня этот баг IE6 уже достал. Постоянно с ним приходится сталкиваться. И, видимо, ничего тут не поделать.

    Ответить

  8. paraboom, 02.10.2008 в 12:20

    Почему все исправляется.

    Делаешь элементу left:-"ширина элемента" и margin-left:100%

    Только родителю нужно overflow:hidden.

    Таким образом элемент скрывается за правой частью родителя и выдвигается отрицательный left

    Ответить

  9. Bolzamo, 02.10.2008 в 14:08

    > Сравнение Drupal и XOOPS

    В ссылке не указан href :)

    Ответить

  10. rotor, 02.10.2008 в 14:20

    Сорри, исправил.

    Ответить

  11. Bolzamo, 03.10.2008 в 7:44

    Мммм... Я здесь в верстке косяк углядел:

    У десятого комментария единица из номера съехала влево за видимую область экрана.

    У меня: Firefox 3.0, OS: GNU/Linux, разрешение 1024*1280 (да, ширина — 1024).

    Хорошо бы поправить. Если у других не так, могу прислать скриншот.

    Ответить

  12. rotor, 03.10.2008 в 8:23

    Да, я знаю, есть такая недоработка.

    Как выпадет свободная минутка, обязательно подправлю.

    Ответить

  13. serg, 03.10.2008 в 11:17

    Bolzamo, ну достаточно умньшить окно и то же самое наблюдается...

    У десятого комментария единица из номера съехала влево за видимую область экрана.

    Ответить

  14. gordi, 03.10.2008 в 17:10

    К сожалению, одной из самых главных проблем абсолютного позиционирования является простое масштабирование страницы. И это сводит все преимущества на нет. Возможность менять только размер шрифта, как это сделано в IE6 (7) и в FF3 не много спасает положение, но что делать с OPERA?

    Моя попытка описать эту проблему: trifler.ru/blog/post_1207234788.html

    Представленные примеры адаптированы под 1024*768. Использование скрипта призванного хоть, как-то минимизировать поведение разметки при других разрешения выглядит совершенным извратом :)

    И в этом смысле «боязнь» не только оправдана, но и вполне уместна :)

    Ответить

  15. Ви, 03.10.2008 в 23:09

    2 Евгений, Dimox:

    Этот баг недавно описывался Сергеем Чикуеноком («Создание блоков со скругленными уголками@artlebedev.ru»). Суть в том, что наш «любий» недобраузер высчитывает right только от четной величины блока, т.е. если у блока длинна 61px, то right будет 60px :((

    Ответить

  16. Ti, 06.10.2008 в 8:47

    position: absolute

    немного уменьшает html, позволяя использовать более произовльное расположение элементов в html

    я пока не научился футер прибивать с абсолютной позицией (да оно и не сильно надо), все остально верстаеца очень хорошо

    с IE есть некоторые (не-)решабельные проблемы.

    итак, мои 5 копеек:

    1. Что бы блоки не уезжали при ресазе страницы и появлении горизонтального скролла:

    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    body { position: absolute; left: 0; top: 0; }

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

    2. min-height, min-width можно фиксить с помощью однопиксельного скрытого блока, с заданой height/width

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

    что бы IE правильно это понял достаточно у родителя указать position: relative

    4. при абсолютном позиционировании договоритесь о z-index значениях, внесите эту договоренность в css. Я использую следующие значения:

    /*

    z-index level:

    0 — 99 background

    100 — 499 content

    500 — 999 top

    1000 — 1499 toolkits

    */

    5. не смог заличить IE за такую фичу:

    node { left: 50px; right: 50px; }

    последнее значение IE игнорирует, растявая блок по содержимому node

    Ответить

  17. rotor, 06.10.2008 в 9:39

    gordi

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

    Ещё, у вас в примерах явное объявление высоты для div, что не очень хорошо работает при увеличении размера текста в Mozilla (текст выходит за рамки контейнера), лучше задать высоту относительно контента.

    За примеры спасибо.

    Ti

    position: absolute

    немного уменьшает html, позволяя использовать более произовльное расположение элементов в html

    Это для сброса стандартных значений отступов в браузере?

    Тогда лучше использовать осмысленный reset.css.

    Ответить

  18. gordi, 06.10.2008 в 18:58

    К № 17 «Честно, не знаю...»

    В том то все и дело, что на пактике верстать страницу в помощью абсолютного позиционирование, на прямую, а не отдельные элемены — что-то в header или footer расположить :)

    совсем не просто, если вообще, возможно :)

    По крайней мере встречать более или менее приличного исполнения не приходилось :)

    Поэтому и надо «бояться» :)

    Ответить

  19. Вебдайджест | HTML и CSS, доступность и юзабилити — Life Style, 09.10.2008 в 11:37

    [...] Боязнь абсолютного позиционирования в CSS — статья для тех кто избегает использования [...]

    Ответить

  20. Zodios, 11.10.2008 в 14:31

    Метод похож на slidingdoors только с абсолютным позиционирование. Нюанс в том что в ие6 нередко выскакивают баги которые решаются через hasLayout

    Метод “Раздвижных дверей” Sliding Doors

    Ответить

  21. Den, 29.12.2008 в 4:30

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

    Ответить

  22. Economist, 18.03.2009 в 18:56

    Попытался вставить в основной текст текстовый блок, но нет обтекания, буду разбираться :) Спасибо за идею про абсолютное и относительное расположение, пригодиться :)

    Ответить

  23. VALERA, 12.09.2009 в 21:40

    Просто ёкалный бабай!

    Я парился и парился перечитал все,всех и вся...

    Залез даже в души людей и др.разной нечести...

    Но все реальное стало не реальным!

    Пипец,просто!

    ЦИТАТА.

    ------------------------

    если родительскому элементу задать position: relative, то его дочерние элементы с абсолютной позицией, будут располагаться относительно родителя

    ------------------------

    Это реально жёстко!!!

    Я тоже думал об этом сам,но не применял свойство Релактив.

    Жёстко!

    Спасибо и пускай тебе приедет счастье домой!!!

    Ответить

  24. джубалайзер, 29.09.2009 в 15:06

    Может кому будет полезно...

    иногда забывают об особенности ИЕ, которую не решает HasLayout... при абсолютном позиционировании при ресайзе окна нужно обновить страничку, чтоб все стало на свои места... возможно придется добавить несколько строк Javascript. Пробуйте и Гуглите...

    Ответить

  25. Svertikall, 02.10.2009 в 18:49

    Привет. Подскажите, как перевести блог с бесплатного хостинга, вот мой блог блог

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

    Ответить

  26. @ HayPro, 07.01.2010 в 17:32

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

    Ответить

    • rotor, 07.01.2010 в 18:04

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

      А обтекать абсолютные слои, как это делается с float не получится. Но можно добиться чего-то подобного с помощью внешнего контейнера для абсолютного блока и margin/padding для внутренних элементов с контентом.

      Ответить

  27. Anonimys, 12.02.2010 в 19:04

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

    rotor, вы получили моё уважение

    Ответить

  28. Андрей Игоревич, 14.02.2010 в 21:44

    Насчет боязни — это точно! Помню, прочитал где-то про абсолютное позиционирование и офигел: это же теперь я могу все, что угодно, размещать, где угодно! Но как только изменил разрешение экрана(хорошо хоть вовремя додумался), так сразу и обломался. И я вообще забыл об абсолютном позиционировании, т.к. подумал: а нахрен оно ваще тогда надо? Ну а теперь, задавая внешнему блоку relative, а внутренему absolute, я наконец-то могу творить все, что вздумается!!!!!!!!! Спасибо тебе, Евгений, очень выручил!

    Ответить

  29. Metaluga, 16.04.2010 в 14:34

    Какая полезная информация. Я мучилась два дня с шапкой сайта. Верстка резиновая В нем было три элемента: левая картинка, правая и по-середине меню. Причем картинки должны были «прилипать» к краям шапки, а меню располагаться по центру относительно страницы. Сначала я пробовала через float (ставила для всех элементов), но меню естественно съезжало в стороны. Потом стала задавать абсолютное позиционирование для картинок, а меню задавала только отступы, но естественно, при уменьшении окна браузера картинки лезли на меню. У кого я только не спрашивала, что мне делать: и у знакомых верстальщиков и на форумах сидела и к своему счастью в конце концов нашла эту статью. Огромное спасибо автору.

    PS:

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

    Ответить

  30. DuBEPCAHTKa, 21.09.2010 в 16:48

    А не подскажете, как все же бороться со следующим багом ИЕ6:

    Если у нас есть такого вида код:

    d2

    d3

    d6

    Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст... Здесь ваш текст...

    d5

    К нему такого вида стиль:

    body{

    background-color:#CCC;

    }

    .d1{

    position:relative;

    width:100%;

    background-color:#fff;

    }

    .d2{

    position:absolute;

    bottom:0;

    right:0;

    width:30px;

    height:30px;

    background-color:#FCC;}

    .d3{

    position:absolute;

    bottom:0;

    left:0;

    width:30px;

    height:30px;

    background-color:#99F;}

    .d4{

    float:left;

    width:50%;

    padding-left:40px;

    background-color:#36F;

    }

    .d5{

    float:right;

    width:25%;

    height:50px;

    background-color: #6F9;

    }

    .d6{

    position:absolute;

    top:0;

    left:0;

    width:30px;

    height:30px;

    background-color:#FF6;

    }

    .clear {

    clear:both;

    height:1px;

    font-size:1px;

    }

    Т.е. блок с текстом должен раздвигать по высоте наш блок-контейнер d1. Для этого в конце мы используем блок clear c параметром clear:both;

    В результате ИЕ6 просто выкидывает в неизвестном направлении все абсолютно позиционированные блоки.

    Каким образом можно решить данную проблему? :(

    Ответить

  31. DuBEPCAHTKa,, 21.09.2010 в 16:54

    Ой... простите за код... ^_^

    вот он ---->http://s47.radikal.ru/i117/1009/4e/1e830f0bab53.jpg

    Ответить

  32. Даша, 22.09.2010 в 15:57

    ВЫшеописанная проблема решается следующим способом:

    Убираем блок clear а для родительского блока d1 ставим следющее:

    overflow:hidden; /*Лекарство*/

    _height:1%; /*оно же для IE*/

    Ответить

  33. @ Александр, 16.12.2010 в 9:06

    Здравствуйте

    Подскажите пожалуйста как в WP позиционировать форму поиска, я этот код разместил в дополнительном виджете, тоесть настройки позиционирования должны быть прописаны в этои коде, а не в CSS

    Спасибо.

    Найти:

    Ответить

    • rotor, 21.12.2010 в 11:09

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

      Ответить

  34. Купи слона, 29.04.2011 в 4:15

    А сейчас на дворе уже 2011 и я лично с версткой под ie 6 с его извращениями уже вообще не заморачиваюсь

    Ответить

    • WebSee, 09.10.2011 в 5:14

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

      Ответить

  35. Рукабанан, 11.02.2014 в 3:30

    Сейчас 2014 год и абсолютное поизиционирование используют поголовно, адобе со своим генератором css приучил

    Ответить

  36. Алексей, 20.03.2015 в 1:43

    Всем привет ! не любитель я посты оставлять , но здесь оставлю , владелец статьи огромный зачёт тебе !!! гору инфы прочитал и не решил проблему , ты "тремя словами " за 5 минут всё мне объяснил , признателен , ели чё пиши на почту , таким людям всегда помогу чем смогу без всякой корысти.

    Ответить

  37. Trioni, 22.09.2016 в 15:31

    Зачётная статья, пока её не прочитал, не знал о таком поведении.

    CSS — потихоньку учу.

    Ответить

Есть что сказать?