10 июня 2014 в 11:43

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

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

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

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

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

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

Стоит ли стремиться к одинаковому поведению HTML/CSS на Desktop и Mobile?

Проголосовало 1009 человек. Воздержалось 132 человека.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Сергей Той @Toy
карма
23,0
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (12)

  • +15
    Самый главный грех — отступление от стандартов.
    И ведь кучу раз накалывались, но нет, продолжают прыгать на кактусы с голой жопой.

    Что за оптимизация такая на смартах с процом, который мощнее моего ноутбучного, мне тоже не до конца понятно.

    Одно я понимаю точно — геморроя прибавится :D
    • +2
      Но изобретение дурных стандартов — грех как минимум не меньший.
      • +1
        Важно уточнить, что стандарты были актуальны на момент своего написания (я сейчас говорю о конкретно position: fixed). Вопрос в том, что W3C не видит весомой причины вносить изменения (в чём я их поддерживаю), но рынок уже изменился и получилось так, что FF и IE, которые реализуют position: fixed по стандарту — по факту аутсайдеры.
        • +1
          Про fixed я в общем-то согласен. Доводы нарушителей звучат очень спорно.
          Но ведь W3C уже не раз вводили дурацкие стандарты. Один из примеров описан тут же: opacity порождает новый контекст — вот тут никаких логических причин я не могу придумать при всем желании.
          Ещё пример навскидку — блочная модель content-box, от которой все плевались. И стоило разработчикам к ней привыкнуть, как внезапно придумали border-box.
          Таким образом, W3C создает себе репутацию, скажем так, недостаточно мудрого руководителя.
          • +2
            Обсуждать рациональность решений W3C я не возьмусь, в силу нехватки знаний. Но что касается opacity:

            Выдержка из стандарта, почему opacity < 1 порождает новый контекст.
            Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts.
  • НЛО прилетело и опубликовало эту надпись здесь
    • +1
      Вся мощь соц.опросов :)

      Скорее всего округляется до целого.
  • +1
    > хотя я так и не могу понять, о какой конкретно оптимизации идёт речь

    из цитаты приведенной вами:

    > moving these portions relative to each other on a dedicated thread

    Предполагаю, что у них всё заточено на то, что если элемент в собственном контексте, то и рендерится он паралельно
  • +2
    Мобильный ие 10 i.piccy.info/i9/28a6259169c4163ed014225a59b1e597/1402399244/4674/721985/wp_ss_20140610_0001.png
    Микрософт вообще, на сколько помню, обещали мобильный и взрослый ие одинаковыми, чуть ли не идеально одинаковые.
    • 0
      Благодарю! Как и ожидал — одинаковое поведение на десктопных/мобильных IE.
      P. S. Я кстати отпавил свой вопрос в Microsoft и ожидаю мнения их экспертов по веб-стандартам, относительно этого.
  • +3
    У актуального хрома есть ещё одна забавность с z-index: input хоть и выше, но кликабелен только по краям.
    • 0
      Это, прям таки, что-то странное.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.