Комментарии 18
Так чем Absolute от Fixed отличается?
Тем, что у fixed в качестве содержащего контейнера установлен viewport (область просмотра), а у absolute - либо ближайший предок с position отличным от static, либо корневой элемент, если нет такого предка.
fixed когда при прокрутке страницы элемент постоянно на одном месте absolut прокручивается.
Да, действительно, спасибо. В IE, правда, не работает. Или есть способ заставить его работать?
хо-хо! это, дражайший, целые тома по кроссплатформенным решениям. Порой чего только не придумаешь что б заставить ИЕ либо Лису дружить в рамках одной страницы. Вот появится у меня свободное время накропаю ряд статей по личному опыту "Как правильно побеждать, или о попытках эксперимента холодного термо оранжевого синтеза зубастого рыжего и угловатого синего"
А какие есть отличительные черты у элементов block? Я, честно говря, кроме как что они занимают всю полосу и не дают ничему стать рядом (прастите, что так по простому изъясняюсь) ничего не могу пока придумать. Т.е. Элемент стал float:left, рядом (слева, справа) что-то стоит, это уже новое знание для меня =) Но что приэтом ещё меняется, кроме того, что мы об этом знаем? Как-то меняется при этом его влияние на содержимые элементы/блоки или на окружение?
Сумбурно, но, кажется сказал, что хотел :)
Сумбурно, но, кажется сказал, что хотел :)
Кошмар, сколько ошибок сделал, голова не варит под конец дня. "простите", "говоря"... ещё раз приношу свои извинения =)
Собственно вы и описали отличительные черты блочных элементов. В спецификации это называется контекстом форматирования блока (block formatting context). Кроме того, блочные элементы генерируют контейнер, который устанавливают в качестве содержащего для своих потомков.
Если элемент стал поплавком, то остальное содержание начинает его обтекать (справа, если float: left и слева, если float: right), либо можно запретить обтекание с помощью clear. Также, есть определённые правила поведения для float.
Не стоит извиняться за "по простому изъясняюсь". Я бы хотел всю эту муть из спецификации изложить на человеческом языке - собственно, данная статья и есть попытка такого изложения.
Если элемент стал поплавком, то остальное содержание начинает его обтекать (справа, если float: left и слева, если float: right), либо можно запретить обтекание с помощью clear. Также, есть определённые правила поведения для float.
Не стоит извиняться за "по простому изъясняюсь". Я бы хотел всю эту муть из спецификации изложить на человеческом языке - собственно, данная статья и есть попытка такого изложения.
спецификацию не стоит воспринимать как учебное пособие для начинающих :) когда уже все понимаешь — не такая уж и муть... наоборот, объясняет то или иное нелогичное поведение браузера (на пару с msdn) :)
посути ты и хочешь написать очередной учебник :)
посути ты и хочешь написать очередной учебник :)
Нет, что вы. Очередной учебник пускай пишет кто-нибудь другой. Я лишь хочу заострить внимание на некоторых моментах.
тем более что начитавшись этого начинаешь не обяснять а просто бросатся разнообразными малосмысловыми значениями. Почему бы не постаратся упростить если комуто хочется что либо пояснить
Интересно, а почему JS не сообщает о том, что тип отображения элемента block, если поставить ему float:left?
http://fog.od.ua/files/pos/1.html (нужно нажать кнопку внизу)
> Кроме того, блочные элементы генерируют контейнер, который устанавливают в качестве содержащего для своих потомков.
Тоесть, это значит что относительно этого контейнера могут отсчитываться позиции вложенных?
А разве не блочные не генерируют контейнер?
Вот в этом примере блок DIV внутри SPAN, от которого отсчитывается. SPAN'у установлен position: relative... или это тоже делает его блочным элементом? Почему он тогда ничем не отличается от строчного SPAN?
http://fog.od.ua/files/pos/2.html
http://fog.od.ua/files/pos/1.html (нужно нажать кнопку внизу)
> Кроме того, блочные элементы генерируют контейнер, который устанавливают в качестве содержащего для своих потомков.
Тоесть, это значит что относительно этого контейнера могут отсчитываться позиции вложенных?
А разве не блочные не генерируют контейнер?
Вот в этом примере блок DIV внутри SPAN, от которого отсчитывается. SPAN'у установлен position: relative... или это тоже делает его блочным элементом? Почему он тогда ничем не отличается от строчного SPAN?
http://fog.od.ua/files/pos/2.html
по правилам нельзя использовать блочные элементы внутри строчных :) валидацию не пройдете :) да и просто логичность кода потеряется для тех кто будет читать его... да и для поисковиков тоже.
js не знает свойств блока переданных ему через css либо выставленных по дефоулту браузером.
"Если position равно absolute или fixed (подвид absolute), то display устанавливается в block"
С чего вы взяли что ваш span с позиционированием relative стал блочным? вы во всех браузерах проверили? по-моему в каком-то будут глюки...
jahson описал лишь то, что написано в спецификации, браузеры зачастую ведут себя не полностью так... это из-за того, что они пытаются исправить ошибки верстальщиков и хоть как-то более менее правильно показать контент...
js не знает свойств блока переданных ему через css либо выставленных по дефоулту браузером.
"Если position равно absolute или fixed (подвид absolute), то display устанавливается в block"
С чего вы взяли что ваш span с позиционированием relative стал блочным? вы во всех браузерах проверили? по-моему в каком-то будут глюки...
jahson описал лишь то, что написано в спецификации, браузеры зачастую ведут себя не полностью так... это из-за того, что они пытаются исправить ошибки верстальщиков и хоть как-то более менее правильно показать контент...
> js не знает свойств блока переданных ему через css либо выставленных по дефоулту браузером.
Если написать в стиле display: block - прекрасно знает.
> С чего вы взяли что ваш span с позиционированием
> relative стал блочным? вы во всех браузерах проверили?
> по-моему в каком-то будут глюки...
Я не взял, я предположил такую возможность, в своём комментарии я наоборот делал упор на то, что он строчный, обратите внимание :)
Предположил потому, что от него начал вложенный элемент отсчитываться.
Блок в текстовый вложил потому, чтобы показать пример. Сейчас задумался, в реальной вёрстке действительно такое и ненужно, в общем.
Что касается браузеров - проверил в доступных мне Opera, IE, Firefox...
По поводу браузеров и спецификация, я догадываюсь, хотел получить комментарий специалиста =)
Если написать в стиле display: block - прекрасно знает.
> С чего вы взяли что ваш span с позиционированием
> relative стал блочным? вы во всех браузерах проверили?
> по-моему в каком-то будут глюки...
Я не взял, я предположил такую возможность, в своём комментарии я наоборот делал упор на то, что он строчный, обратите внимание :)
Предположил потому, что от него начал вложенный элемент отсчитываться.
Блок в текстовый вложил потому, чтобы показать пример. Сейчас задумался, в реальной вёрстке действительно такое и ненужно, в общем.
Что касается браузеров - проверил в доступных мне Opera, IE, Firefox...
По поводу браузеров и спецификация, я догадываюсь, хотел получить комментарий специалиста =)
>> js не знает свойств блока переданных ему через css либо выставленных по дефоулту браузером.
>Если написать в стиле display: block - прекрасно знает.
Я имел ввиду если блоку присвоить свойство через css файл или тег style, а не inline'овым стилем, то js низачто не поймет это свойство если выводить alert(elem.style.display)... А вот если написать style="display: block" то js все прекрасно поймет... Добраться до css можно другим способом...
>Если написать в стиле display: block - прекрасно знает.
Я имел ввиду если блоку присвоить свойство через css файл или тег style, а не inline'овым стилем, то js низачто не поймет это свойство если выводить alert(elem.style.display)... А вот если написать style="display: block" то js все прекрасно поймет... Добраться до css можно другим способом...
Указание у элемента position: relative устанавливает генерируемый им контейнер в качестве содержащего для потомков.
Сточные генерируют контейнер, но не устанавливают его в качестве содержащего.
Конкретно всё написано в самом начале http://www.w3.org/TR/REC-CSS2/visudet.ht…
Сточные генерируют контейнер, но не устанавливают его в качестве содержащего.
Конкретно всё написано в самом начале http://www.w3.org/TR/REC-CSS2/visudet.ht…
Предлагаю перенести в Каскадные Таблицы Стилей :)
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Разделяй и властвуй — float, position и display