Абсолютно относительно
В ЦССе постоянно приходится делать абсолютно позиционированные элементы внутри относительно позиционированных, чтобы «привязаться» к какой-то плавающей точке в нормал-флоу. Это тупизм, потому что это вынуждает в разметке добавлять лишние элементы. Например, нам надо пририсовать к слову значок суффикса, который у нас есть в виде гифовой картинки. Вот что хочется писать в разметке:
слов<img class="suffix" src="i/suffix.gif" />ечкоНо что написать в стилях?
.suffix {
position: ???
width: 1.5em; /* на три буквы чтоб */
bottom: -1em;
}Относительно позиционированный элемент занимает собой места в нормал-флоу столько же, сколько непозиционированный, а потом может быть сдвинут относительно этого места так, что нормал-флоу этого не заметит. В нашем случае это не подходит, потому что будет разрыв между «слов» и «ечко» шириной в картинку.
Абсолютно позиционированный элемент не участвует в нормал-флоу и позиционируется относительно ближайшего позиционированного предка, либо относительно границ браузера, если позиционированных предков нет. Это нам тоже не подходит, так как нам надо, чтобы позиционировалась картинка именно относительно той точки в слове, куда мы её поставили.
Поэтому всё время приходится делать так:
слов<span class="suffix"><img src="i/suffix.gif" /></span>ечко.suffix { position: relative }
.suffix img {
position: absolute;
width: 1em;
bottom: -1em;
}Спан, конечно, красивее было бы закрыть после «ечк», но это не про семантику заметка. Так вот, весь этот спан, получается, существует только для того, чтобы задать «систему координат» для картинки. Но ведь она уже задана тем, куда вы воткнули эту картинку в разметке!
Так почему было не придумать какой-нибудь position: anchored, который бы участвовал в нормал-флоу, но с точки зрения нормал-флоу имел бы размеры 0 на 0? Можно было бы развить идею, введя anchored-x и anchored-y, чтобы, допустим, сделать сноски на поля, висящие на уровне того места, откуда на них ссылаются. Атрибут position: anchored-y означал бы, что left / right для этого элемента имеют смысл по принципу position: absolute; а top / bottom — по принципу position: anchored, т. е. относительно точки, где элемент встретился в разметке. Тогда текст, снесённый на поля, можно было бы размечать так:
Пушкин писал<sup>1</sup><div class="sidenote"><sup>1</sup> В «Капитанской дочке»</div>: «Береги честь смолоду»..sidenote {
position: anchored-y;
left: 110%; /* чтобы отступить от самого текста 10% его ширины */
top: 0;
}Почему создатели стандартов придумывают всякую хрень (вроде box-shadow или анимации) раньше, чем решают базовые задачи вёрстки?
Добавлено несколько позже: Оказывается, я ничего не понимаю в вёрстке. Спасибо комментаторам за прояснение ситуации.
А если так?
img.suffix {
position: absolute;
width: 1.5em; /* на три буквы чтоб */
margin-bottom: -1em; /* или margin-top: 1em */
}
А то, что абсолютные элементы остаются на месте, пока мы не указали координаты — это разве не случайность какая-то? На это можно полагаться?
Как насчёт absolute без координат и margin?
Сноски на полях, «висящие на уровне», прекрасно реализуются абсолютным позиционированием.
А суффикс, теоретически, можно попробовать нарисовать фоном. Но тут надо чуть подумать и проанализировать разные ситуации с шириной/высотой строки и т. д.
Солидарен полностью.
Для упрощения себе жизни советую написать небольшой JS, который ищет теги с определённым классом и обрамляет их «избыточным» тегом.
И красиво и удобно, хотя и через гланды =)
Опоздал :)
Кстати, картинка внутри слова, если я правильно помню, является возможной точкой переноса, так что и при этом не все совсем гладко.
Илья,
!!А то, что абсолютные элементы остаются на месте, пока мы не указали координаты — это разве не случайность какая-то? На это можно полагаться?!!
Можно, так и должно быть. Именно поэтому и маргиналии на поля можно вынести абсолютным позиционированием.
Крутяк, буду знать.
{
position: relative;
width: 1.5em; /* на три буквы чтоб */
margin-right: -1.5em;
bottom: -1em;
}
Если абсолютно спозиционированному элементу не указывать координаты, он располагается так, как если бы он находился в нормальном потоке. Как-то так.
По спецификации если для абсолютно спозиционированного элемента не указывать позиционные координаты top/bottom/left/right, то элемент остаётся там, где он был бы в нормальном потоке, при этом, естественно, на поток не влияет. Так что «относительное смещение абсолютных элементов» через margin — вполне законный трюк, я им очень давно пользуюсь.
Чем плохо так:
.suffix:before {
content: url(i/suffix.gif);
}
Ну кроме ослика, конечно.
Потому что хотят «красиво», а потом уже правильно.
Если нужно разместить рядом с текстом иконку, то достаточно использовать vertical-align c необходимым значением.
Позиционированные предки не могут отсутствовать. Формально, «границы браузера» являются таким же «ближайшим позиционированным предком».
Вот цитата (http://www.w3.org/TR/2008/REC-CSS2-20080411/visuren.html#containing-block):
«The root of the document tree generates a box that serves as the initial containing block for subsequent layout».
слов<span class=«suffix3»>ечк</span>о
{ background: url(suffix3.gif) no-repeat 50% 0%; }
suffix3 вместо suffix подразумевает, что картинки для 1-, 2-, 3- и более (а бывает?) -буквенных суффиксов разные.
Ха-ха, кавычки в коде затипографились ;-). См. мой недавний стёб на тему: http://yaker.livejournal.com/261175.html
Гм, а по моему так правильно сделать слов[span class=«suffix»]ечко[/span] — а картинку фоном в спане, да и семантичнее. И вообще, img для презентационной графики уже лет 10 никто не использует :) (как и гиф, хехе)
egorinsk прав с небольшой поправкой. Лучше всего это делать спрайтами.
Илья, а где зелененькие бордюры слева у «отмеченных» комментариев? Раньше было удобней читать комментарии )
Согласен с уважаемыми Георгием и egorinsk.
Илья, у меня почему-то на http://ilyabirman.ru/meanwhile/ не видна иконка сайта в ФФ. И в Хроме тоже. Не связано ли это с тегом base?
Алик Кириллович> The root of the document tree generates a box that serves as the initial containing block for subsequent layout
Но он не то же самое, что «границы браузера».
Илья, пропишите абсолютный адрес фавиконки блога или добавьте её в папку /meanwhile/ ;)