Сегодня 24 апреля, среда

Какой рейтинг вас больше интересует?

получить код

Главная / Каталог блогов / Cтраница блогера Хабрахабр: Web-разработка / Блог / Захабренные / Запись в блоге

	Хабрахабр: Web-разработка / Блог / Захабренные Голосов: 1 Адрес блога: http://habrahabr.ru/blog/webdev/ Добавлен: 2008-06-12 19:52:21 блограйдером ZaiSL

То, что вам никто не говорил о z-index в статье «То, что вам никто не говорил о z-index»

2014-06-10 11:43:54 (читать в оригинале)

Почти два года назад вышла статья «What no one told you about z-index» (и её перевод на Хабре «То, что вам никто не говорил о z-index»), авторы которой рассказывают о малоизвестной (76% проголосовавших пользователей Хабра слышат об этом впервые), но документированной возможности создания нового контекста наложения указав opacity меньше единицы.

Но несмотря на название статьи, авторы не рассказали вам ещё кое о чём.

Предполагается, что вы знакомы с понятием контекста наложения (англ. stacking context).

Элементы с общими родителями, перемещающиеся на передний или задний план вместе известны как контекст наложения. Понимание контекста наложения является ключом к пониманию z-index и порядка наложения элементов.

Каждый контекст наложения имеет свой корневой элемент в HTML структуре. В момент формирования нового контекста на элементе, все дочерние элементы так же попадают в этот контекст и занимают своё место в порядке наложения. Если элемент располагается в самом низу одного контекста наложения, то никаким мыслимым и немыслимым образом не получится отобразить его над другим элементом в соседнем контексте наложения, располагающимся выше по иерархии, даже с установленным z-index равным миллиону.

— Из статьи «То, что вам никто не говорил о z-index». Для понимания темы настоятельно рекомендую к ознакомлению либо её, либо классический труд на MDN.

Новый контекст наложения формируется в случаях:

Корневой элемент (<html>) всегда содержит корневой контекст наложения. Любой элемент на странице, не участвующий в локальном контексте наложения (сформированном любым из последующих вариантов), участвует в корневом контексте наложения.
Элемент с position отличным от static и значением z-index отличным от auto. Кроме одного исключения для position: fixed, но я это вынес в отдельный пункт.
Элемент имеет значение opacity меньше, чем 1.

Нужно больше контекстов наложения!

Тэги: chrome, context, css, firefox, google, html, stacking, w3c, z-index, веб-разработка, веб-стандарты, контекст, наложения, скандалы-интриги-расследования

Блограйдеров
14489

Блогов
219902
(+0 сегодня)

Сообществ
1309
(+0 сегодня)

Рыбалка
по среднему баллу (5.00) в категории «Спорт»

Категория «Радио»

Взлеты Топ 5


+40	47	Фрагменты
+30	57	тот_самый_Петрович
+19	40	история интерьера
+1	27	Новости сайта RocketsMusic.ru
+1	17	промо радио

Падения Топ 5


-17	20	Радио ФМ Онлайн слушать бесплатно
-24	2	Лучинин.net

Загрузка...

BlogRider.ru не имеет отношения к публикуемым в записях блогов материалам. Все записи
взяты из открытых общедоступных источников и являются собственностью их авторов.