То, что вам никто не говорил о 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?

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

    Поделиться публикацией
    Похожие публикации
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама
    Комментарии 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
                Это, прям таки, что-то странное.

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