Проблемы CSS. Часть 2

[d4rkr00t]

спасибо, добавил в статью

[kyrie]

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

[remal]

Про height:100% html и body — jsfiddle.net/PGtPK/1/ (вместо height надо min-height для html и body указывать)

Про то, что height:100% применяется только для тех элементов, высота родителей которых известна (задана, пусть и в процентах) автор намеренно упустил? ( jsfiddle.net/PmJCD/ смотреть в ie (я в 9 тестировал), если что, режим совместимости надо выключить )

> overflow: hidden (или любой другой но не auto)
Любой другой кроме visible, а не auto — www.w3.org/TR/CSS21/visuren.html#block-formatting

Вы когда переводили, сами проверяли что переводите?

[d4rkr00t]

Да вы правы, как раз с auto работает, а с visible нет, поправлю в переводе.

[PiSaiK]

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

Ситуация с height:100% верная, но тут есть над чем подумать. Но об этом не хочу сейчас.

С width:100% тут все гораздо проще, чем может быть. Есть такое замечательное свойство display:block, оно по умолчанию делает блок со свойством box-sizing: border-box. И при этом некоторые стандартные теги, например DIV уже имеют его. Пример: если размещаете один див в другой, то второй будет иметь ширину + отступ наружний + бордер + отсуп внутренний по умолчанию.

Стоило написать, что проблема касается, например сделать поле для ввода шириной 100%. В этом случае да, уже без box-sizing: border-box не обойтись, это проблема касается только полей форм. Для остальных есть решение display:block

C z-index все еще проще. Комментарий не совсем верные. Еще очень важен порядок элементов, в браузерах следующий элемент расположен выше, чем предыдущий. В одном из проектов столкнулись с актой проблемой. Важный блок поставили в начале HTML, задали absolute, z-index. А он оказывался ниже блока по Z, который был в самом конце HTML с тем жe z-index… Правильно будет так написать

Перед применением z-inedx убедитесь, что установили свойство position не равным static
Не используйте значения большем чем 5 цифр для z-index, это абсолютно бессмысленно; в большинстве случаев, значение z-index в районе 10, будет более чем достаточно.
Убедитесь, что элемент который вы хотите перекрыть находится в том же контексте наложения или дальше по коду.
Если у вас все еще что-то работает не так, как должно, убедитесь в отсутствии трансформаций, opacity и position не равный static выше у родительских элементов.

Проблемы будут у автора, по любому

[d4rkr00t]

> С width:100% тут все гораздо проще, чем может быть. Есть такое замечательное свойство display:block, оно по

display: block не делает элемент box-sizing: border-box. И этот случай в статье описан. Так работает только если не задавать свойство width: 100%;

jsfiddle.net/UP6Cm/

> C z-index все еще проще. Комментарий не совсем верные

Добавлю уточнение в статью, хотя там и рассматривается немного другой случай. Когда есть два блока с z-index или position не static и нужно, что бы дочерний элемент одного перекрывал дочерний элемент другого блока. Или когда свойства типа opacity и transform создают свой контекст там где это не задумывалось.

[Theo_from_Sed]

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

[d4rkr00t]

Это да, лечится так же height: 1px;

[andead]

интересно, если body по умолчанию имеет height:auto, то почему

body style=«background:red;»

зальёт всю страницу?

[Spaceoddity]

Эх, опять одни и те же баяны…
Первая часть поста могла бы быть гораздо короче:
— блок на всю высоту страницы:
html{
height:100%;
}
body{
position:relative;
height:auto !important;
height:100%;
min-height:100%;
}
#div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

[Spaceoddity]

Позиционирование можно отключить, но вот порядок следования свойств для — критичен, ибо

[Spaceoddity]

Поразительное дело — приспичило мне тут растянуть абсолютно позиционированный блок на всю ширину страницы… И так, и сяк — растягивается только на высоту вьюпорта. Полчаса шерстил инет, максимум что советуют, это position:relative; для body. Но не работает же.
И тут натыкаюсь на эту статью, вскользь пробегаю комментарии глазами. Нахожу свой же рецепт (а ведь я его когда-то даже отдельно выписывал — поскольку уж очень часто потребность была в подобном трюке). Копипастю — всё работает))
Зато кто-то, обиженный жизнью, успел минус влепить. Спасибо тебе мил человек — благодаря этому я особо внимание и зафкисировал!

[Spaceoddity]

Позиционирование можно отключить, но вот порядок следования свойств для — критичен, ибо

[iamo0]

что бы → чтобы.

[Sharapov]

[StreetStrider]

[zipo]

Благодарю, вы только что решили мне проблему.

[Vper]

Огромное спасибо за статью. Я очень давно задумывался почему height работает не корректно(в %). Думал, ломал голову, причем все состовляющие были в голове, но вот попросту объединить их в вывод не хватало смекалки. И как обычно это было типа — как же я сам то не допер.