Управление контекстами стекирования CSS в «враждебной» среде

Таким образом, мы можем управлять порядком блоков в стеке, ничего не зная о самой странице (ее дереве DOM или контекстах стека).

Тот же механизм можно использовать для сброса z-indexдемонстрационной версии ).

Более явные контексты

Удаление блока из основного контекста стека позволяет его вложенным контекстам стекирования стать частью более высокого стека. Это означает, что z-index

Например, в демоверсии , когда запускается модальный режим, удаление правой направляющей из контекста наложения верхнего уровня позволяет объявлению конкурировать с другими основными блоками на странице. Другими словами, если бы у объявления был z-index10+в верхней части заголовка .

Из-за риска, связанного со сбросом z-indexz-index Это могут быть объявления или другие модули, которые не контролируются владельцами страниц. «Песочница» этих элементов предотвращает появление ящиков в любом месте на оси «z». Таким образом, мы все еще можем контролировать эти блоки, даже если их предок стилизован с помощью z-index: auto

Чтобы лучше понять эту проблему, посетите эту демонстрационную страницу, где ни песочница, ни правая рейка, ни ее модули. Прокрутите страницу немного и наведите указатель мыши на объявление. Вы должны увидеть объявление, перекрывающее заголовок и «кнопку» для модального окна, просматривающего объявление.

Обе проблемы связаны с идентичными значениями z-index Заголовок отображается за объявлением, потому что оно идет первым. Модальная кнопка отображается перед рекламой, потому что она идет последней.

Реализация

Это решение требует совместного использования простой настройки и общего словаря между сетками (когда задействованы различные сетки, как, например, для сайтов Yahoo — Финансы, Спорт, Домашняя страница, Ответы и т. Д.).

«Четырехступенчатая программа»:

1. Все основные поля на странице должны располагаться и иметь стиль с z-indexauto
2. Каждый из этих блоков должен быть идентифицирован с помощью общего класса: stacking-context
3. Эти же блоки должны иметь data-zindex-maxdata-zindex-topz-index
4. Класс inner-stackлюбого модуля, который может быть стилизован с высоким значением z-index

Например:

 <div id="right-rail" class="stacking-context" 
     data-zindex-max="5" data-zindex-top="10">
  <div class="inner-stack">
    <div id="fresco-thirdparty-tag"
         style="position: absolute; z-index: 10000000000;">

Данные-ZIndex-макс
Этот атрибут используется для объявления наивысшего z-порядка, с которым допускается стилизовать блок. Например, это может быть столбец, который должен всегда отображаться за заголовком.

Данные-ZIndex-топ
Этот атрибут используется для объявления самого высокого z-порядка, установленного на странице. Например, это будет позиция заголовка внутри стека. Любой элемент, стилизованный под это значение z-index

.inner-стек
Этот класс используется для контроля модулей, предотвращая вступление в действие их собственного z-index Это значение z-index

Преимущества этого решения

Снижает риск поломки
Используя атомарную природу контекстов стекирования, мы можем изолировать модули-песочницы, делая их значения z-index

Это предсказуемо
Нет больше угадайку; авторам не нужно ничего знать о дереве документа или его контекстах суммирования, чтобы иметь возможность перемещать блоки через стеки.

Централизует обязанности
Все находится в руках команды, ответственной за саму страницу — команды, которая знает все о документе — его дереве, его стековом контексте и т. Д.

Дальнейшее мышление

В проектах, которые используют одну сетку, а также в проектах, которые используют общую сетку, вещи можно сделать более декларативными с помощью предустановки правил для замены z-index Например:

• .coverTheHeader {...}
• .coverAllColumns {...}
• .coverTheRightRail {...}
• .coverTheLeftRail {...}
• .coverTheMainContent {...}
• и т.п.

Пример кода

Ниже приведен код JavaScript, используемый на главной демонстрационной странице . Этот скрипт отвечает за переключение значения z-index Он также «освобождает» эти элементы, сбрасывая значение z-index Именно сочетание обоих этих стилей позволяет этим элементам вести себя так, как ожидается, даже если к ним применяется очень высокий z-index

 (function(document) {
  function findAncestor(el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
  }

  // constants
  var AUTO = 'auto',
  CSS_MODAL_ON = 'modal-on',
  CSS_INNER_STACK = 'inner-stack',
  DOC = document,
  WIN = DOC.defaultView,
  HTML = DOC.documentElement,

  // elements
  theAd = DOC.getElementById('ad'),
  theAncestorStack = findAncestor(theAd, 'stacking-context'),
  theInnerStack = DOC.getElementsByClassName(CSS_INNER_STACK)[0],
  theModal = DOC.getElementById('modal'),
  theStackUpdate = DOC.getElementById('stackUpdate'),

  // globals
  theInnerStackAncestor,
  zIndexAncestor = WIN.getComputedStyle(theAncestorStack, null).zIndex,
  zIndexCurrent, // will be assigned
  zIndexInnerStack = WIN.getComputedStyle(theInnerStack, null).zIndex,
  zIndexMax = theAncestorStack.getAttribute('data-zindex-max'),
  zIndexTop = theAncestorStack.getAttribute('data-zindex-top');

  function switchStackingContext (e) {
    // we move the ancestor through the stack according to zIndexMax value (highest value allowed for that ancestor box)
    if (WIN.getComputedStyle(theAncestorStack, null).zIndex === zIndexMax) {
      theAncestorStack.style.zIndex = zIndexAncestor;
    } else {
      theAncestorStack.style.zIndex = zIndexMax;
    }

    // we get the ancestor that wraps boxes with potential high/crazy z-index
    theInnerStackAncestor = findAncestor(e.target, CSS_INNER_STACK);

    // we check for the actual value before we change it
    zIndexCurrent = WIN.getComputedStyle(theInnerStackAncestor, null).zIndex;

    // we reset the z-index from the parent ancestor allowing the box to move up (wherever it wants to)
    if (zIndexCurrent !== AUTO) {
      theInnerStackAncestor.style.zIndex = AUTO;
    } else {
      theInnerStackAncestor.style.zIndex = zIndexInnerStack;
    }

    // we update the value on the page
    theStackUpdate.innerText = theAncestorStack.style.zIndex;
  }

  function resetStackingContext (e) {
    // we reset the z-index of the ancestor to free the inner box
    if (WIN.getComputedStyle(theAncestorStack, null).zIndex === AUTO) {
      theAncestorStack.style.zIndex = zIndexAncestor;
    } else {
      theAncestorStack.style.zIndex = AUTO;
    }

    // we get the ancestor that wraps boxes with potential high/crazy z-index
    theInnerStackAncestor = findAncestor(e.target, CSS_INNER_STACK);

    // we check for the actual value before we change it
    zIndexCurrent = WIN.getComputedStyle(theInnerStackAncestor, null).zIndex;

    // we reset the z-index from the parent ancestor allowing the box to move up (wherever it wants to)
    if (zIndexCurrent !== AUTO) {
      theInnerStackAncestor.style.zIndex = AUTO;
    } else {
      theInnerStackAncestor.style.zIndex = zIndexInnerStack;
    }

    // we toggle this class to contextually style the modal (nothing to do with the solution per se)
    HTML.classList.toggle(CSS_MODAL_ON);

    // we update the value on the page
    theStackUpdate.innerHTML = theAncestorStack.style.zIndex;
  }

  theAd.addEventListener('mouseenter', switchStackingContext, false);
  theAd.addEventListener('mouseleave', switchStackingContext, false);
  theModal.addEventListener('click', resetStackingContext, false);

}(document));

Для справки ниже приведены две демонстрационные ссылки, упомянутые в статье. Первый (упоминаемый в статье несколько раз) — это JavaScript, который «управляет» стеком, когда пользователи взаимодействуют с рекламой или «модальным». Второй тоже самое без сценария. Он включен, чтобы показать проблемы, с которыми мы столкнулись бы, если бы полагались на третьих лиц для управления стеками.

• Управление контекстами стека: Демо 1
• Управление контекстами стекирования: Демонстрация 2 (без сценария)