Боязнь абсолютного позиционирования в CSS
Среда, 1 октября 2008
Неудачные примеры, в самом начале обучения верстке, могут отрицательно повлиять на дальнейший опыт и развитие навыков. В частности это относится к абсолютному позиционированию в CSS.
По каким примерам вы знакомились с ним? Расположить отдельный div слева (справа/сверху/снизу/в центре) окна браузера над основной страницей? И где это можно применить, кроме как для fucking pop-up banners и всплывающих форм регистрации (использование для выпадающих меню, предполагает небольшую продвинутость HTML-кодера в этой теме)? Немного полезного применения? Вот именно.
В книгах, обычно, приводят абсолютно нелепые абстрактные примеры, которые у многих убивают дальнейший интерес к этой теме. Отсюда и берутся очередные мифы о том, что абсолютное позиционирование в CSS — зло, и его нужно избегать. Об этом мне пытались ненавязчиво намекнуть в комментариях тут.
Зло — это выключенный мозг и нежелание разбираться в проблемах. Ну что же, развею очередное заблуждение.
Краткая теория
Итак основа основ, с которой все знакомы, это то, что div с применённым к нему свойством position: absolute, вырывается из обычного потока документа и может быть расположен в любом месте окна браузера (или родительского узла) с помощью CSS-свойств top, right, bottom, left.
Теперь открою тайну абсолютного позиционирования для непосвященных: если родительскому элементу задать position: relative, то его дочерние элементы с абсолютной позицией, будут располагаться относительно родителя, а не окна браузера. Для примера картинка:
И код (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 и отрицательные отступы, то можно творить настоящие чудеса в верстке.
Рабочий пример
Вот, что недавно использовал сам в работе (ссылки на «живой» пример нет, потому что проект ещё в работе):
Что может быть лучше и легче для понимания (и кроссбраузерности), чем абсолютное позиционирование и PNG-изображения с полупрозрачными тенями? Баг с PNG-прозрачностью в IE6 фиксим так.
Для желающих разобраться самостоятельно небольшой кусочек «живого» примера. В примере ещё не реализована поддержка min-width для IE6 с помощью expression, поэтому просьба не пинать за это. Если возникли вопросы, спрашивайте в комментариях.
Ещё один вариант использования абсолютного позиционирования можно увидеть в статье «карты изображений на CSS».
При продуманном подходе к верстке, абсолютное позиционирование будет сильным и незаменимым приёмом в вашем арсенале знаний.
* * *
Напомню, что продолжается акция «Давайте знакомиться!». У вас есть шанс получить ссылку и попасть в мой RSS-ридер!
Одно небольшое замечание для желающих поучаствовать: ссылку можно ставить на любой пост блога, а не только на саму акцию. Сегодняшний постовой целиком и полностью посвящен интересным материалам в блогах тех, кто поддержал мою идею.
Постовой:
Google Chrome — тема для Wordpress-блогов. Сравнение Drupal и XOOPS для любителей open-source CMS. Обратите внимание на новый легковесный JavaScript-framework «js-core». Что же такое twitter? Хорошее объяснение для непосвящённых.
Ну и просто спасибо Какуниной Татьяне. Приятно, когда на тебя обращают внимание симпатичные девушки :)
Никого не забыл? Если что — отписываемся в комментариях тут.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Боязнь абсолютного позиционирования в CSS
- добавьте статью в закладки:
* * *
Кстате, если в IE6 не указать ширину для абсолютно позиционированного блока и задать одновременно:
#foo { right: 0; left: 0; }То ширина блока будет рассчитана относительно контета, а не занимать 100% ширины родительского relative-блока, как в нормальных браузерах.
А еще размеры заданные в относительных единицах в IE6 рассчитываютс относительно родительского, а не relative-контейнера.
Вот из-за таких всяких особенностей, неопытные верстальщики и бояться «position: absolute;» :-)
p.s. добавьте неразрывный пробел в метке «не публикуется», а то в «Opera Mini» напротив этого поля написано «публикуется» :D
Octane, как всегда, спасибо за грамотные дополнения.
В IE6 ещё посоветую всегда использовать явное указание размещения (top/right/bottom/left), потому что он иногда ведёт себя странно, и вместо верхнего левого угла (top: 0; left: 0 — по умолчанию в большинстве браузеров), абсолютный блок может оказаться в совершенно непредвиденном месте или вобще не отобразиться.
Большое спасибо, пост очень полезный.
Пишите еще :)
Я очень люблю абсолютное позиционирование и постоянно его использую, как правило, в следующих случаях:
1) когда верстаю шаблон для блога, то все элементы «шапки» делаю абсолютными.
2) в некоторых случаях при создании блоков с закругленными углами.
Я всегда придерживаюсь этого правила, а также никогда не использую одновременно left и right.
Кстати, когда я стал верстать знакомому дизайнеру, который ранее верстал сам, то он испугался, когда увидел, сколько раз в стилях я использую position: absolute :), сказал, что это свойство ведет себя непредсказуемо. Но у меня все под контролем =)
Когда-то давно заметил некоторую особенность при абсолютном позиционировании в IE 6: при позиционировании right и bottom, если изменяется размер родителя (к примеру, меняем размер окна), то в определенных состояниях появляется погрешность в 1px. Может кто-нибудь может прокомментировать подобное поведение?
[...] Абсолютное позиционирование — зло Окт2 Читаем об этом у rotorweb.ru [...]
Евгений, меня этот баг IE6 уже достал. Постоянно с ним приходится сталкиваться. И, видимо, ничего тут не поделать.
Почему все исправляется.
Делаешь элементу left:-"ширина элемента" и margin-left:100%
Только родителю нужно overflow:hidden.
Таким образом элемент скрывается за правой частью родителя и выдвигается отрицательный left
> Сравнение Drupal и XOOPS
В ссылке не указан href :)
Сорри, исправил.
Мммм... Я здесь в верстке косяк углядел:
У десятого комментария единица из номера съехала влево за видимую область экрана.
У меня: Firefox 3.0, OS: GNU/Linux, разрешение 1024*1280 (да, ширина — 1024).
Хорошо бы поправить. Если у других не так, могу прислать скриншот.
Да, я знаю, есть такая недоработка.
Как выпадет свободная минутка, обязательно подправлю.
Bolzamo, ну достаточно умньшить окно и то же самое наблюдается...
У десятого комментария единица из номера съехала влево за видимую область экрана.
К сожалению, одной из самых главных проблем абсолютного позиционирования является простое масштабирование страницы. И это сводит все преимущества на нет. Возможность менять только размер шрифта, как это сделано в IE6 (7) и в FF3 не много спасает положение, но что делать с OPERA?
Моя попытка описать эту проблему: trifler.ru/blog/post_1207234788.html
Представленные примеры адаптированы под 1024*768. Использование скрипта призванного хоть, как-то минимизировать поведение разметки при других разрешения выглядит совершенным извратом :)
И в этом смысле «боязнь» не только оправдана, но и вполне уместна :)
2 Евгений, Dimox:
Этот баг недавно описывался Сергеем Чикуеноком («Создание блоков со скругленными уголками@artlebedev.ru»). Суть в том, что наш «любий» недобраузер высчитывает right только от четной величины блока, т.е. если у блока длинна 61px, то right будет 60px :((
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
gordi
Честно, не знаю, где бы я применил ваши примеры на практике, именно в том виде, в котором они представлены. Обычно использую для абсолютных блоков внешний контейнер а не окно браузера, да и стараюсь не вставлять в них динамический текст, поэтому множества таких проблем просто избегаю.
Ещё, у вас в примерах явное объявление высоты для div, что не очень хорошо работает при увеличении размера текста в Mozilla (текст выходит за рамки контейнера), лучше задать высоту относительно контента.
За примеры спасибо.
Ti
Это для сброса стандартных значений отступов в браузере?
Тогда лучше использовать осмысленный reset.css.
К № 17 «Честно, не знаю...»
В том то все и дело, что на пактике верстать страницу в помощью абсолютного позиционирование, на прямую, а не отдельные элемены — что-то в header или footer расположить :)
совсем не просто, если вообще, возможно :)
По крайней мере встречать более или менее приличного исполнения не приходилось :)
Поэтому и надо «бояться» :)
[...] Боязнь абсолютного позиционирования в CSS — статья для тех кто избегает использования [...]
Метод похож на slidingdoors только с абсолютным позиционирование. Нюанс в том что в ие6 нередко выскакивают баги которые решаются через hasLayout
Метод “Раздвижных дверей” Sliding Doors
внутри таблицы тоже будут располагаться относительно родителя, а не окна браузера...
Попытался вставить в основной текст текстовый блок, но нет обтекания, буду разбираться :) Спасибо за идею про абсолютное и относительное расположение, пригодиться :)
Просто ёкалный бабай!
Я парился и парился перечитал все,всех и вся...
Залез даже в души людей и др.разной нечести...
Но все реальное стало не реальным!
Пипец,просто!
ЦИТАТА.
------------------------
если родительскому элементу задать position: relative, то его дочерние элементы с абсолютной позицией, будут располагаться относительно родителя
------------------------
Это реально жёстко!!!
Я тоже думал об этом сам,но не применял свойство Релактив.
Жёстко!
Спасибо и пускай тебе приедет счастье домой!!!
Может кому будет полезно...
иногда забывают об особенности ИЕ, которую не решает HasLayout... при абсолютном позиционировании при ресайзе окна нужно обновить страничку, чтоб все стало на свои места... возможно придется добавить несколько строк Javascript. Пробуйте и Гуглите...
Привет. Подскажите, как перевести блог с бесплатного хостинга, вот мой блог блог
Вроде как wordpress должен легко двигаться на свежую площадку, хотя у меня все время ошибки в базе данных. Я посмотрел там, хотя в php ничего не понимаю вообще и привлекать сторонних разработчиков программного обеспечения то ведь не хочется. Может подскажите, как безболезненно перенести блог?
Всё это прекрасно, но ничего нового статья не раскрывает, а мне, например, хотелось бы узнать про какие-нибудь методы реализации обтекания абсолютно позиционированных слоев. Существуют ли такие способы? Особенно, когда высота не фиксированная.
Судя по комментариям, статья была полезна для многих.
А обтекать абсолютные слои, как это делается с float не получится. Но можно добиться чего-то подобного с помощью внешнего контейнера для абсолютного блока и
margin/paddingдля внутренних элементов с контентом.имхо это ликбез по абсолютному позиционированию обязательный к прочтению. подкупает то что материал подан в виде простого примера и теории которая позволяет увидеть то-что-находится-под-капотом и отойти на столько далеко от примера, на сколько хватит фантазии.
rotor, вы получили моё уважение
Насчет боязни — это точно! Помню, прочитал где-то про абсолютное позиционирование и офигел: это же теперь я могу все, что угодно, размещать, где угодно! Но как только изменил разрешение экрана(хорошо хоть вовремя додумался), так сразу и обломался. И я вообще забыл об абсолютном позиционировании, т.к. подумал: а нахрен оно ваще тогда надо? Ну а теперь, задавая внешнему блоку relative, а внутренему absolute, я наконец-то могу творить все, что вздумается!!!!!!!!! Спасибо тебе, Евгений, очень выручил!
Какая полезная информация. Я мучилась два дня с шапкой сайта. Верстка резиновая В нем было три элемента: левая картинка, правая и по-середине меню. Причем картинки должны были «прилипать» к краям шапки, а меню располагаться по центру относительно страницы. Сначала я пробовала через float (ставила для всех элементов), но меню естественно съезжало в стороны. Потом стала задавать абсолютное позиционирование для картинок, а меню задавала только отступы, но естественно, при уменьшении окна браузера картинки лезли на меню. У кого я только не спрашивала, что мне делать: и у знакомых верстальщиков и на форумах сидела и к своему счастью в конце концов нашла эту статью. Огромное спасибо автору.
PS:
Наверное действительно все жутко бояться позиционирования, что даже опытные верстальщики не могли дать дельного совета.