Z-индекс по своей сути штука хитрая, и поддержание порядка Z-индекс в сложной версткой, как известно, трудно.

С другой укладка заказов и contexts ¹ , следить за ними, как их номера рост может быть трудно — и как только они начинают распространяться по CSS файлов, забудьте об этом!Потому что г-индекс может сделать перерыв или видимость элемента интерфейса в и удобство, сохраняя интерфейс вашего сайта в рабочем состоянии может быть тонкий баланс .

Из-за Z-индекс contextual ² после того, как вы начнете использовать его, он может быть легко для других элементов, чтобы начать требовать его.Поиск z-index: 99999 правила разбросаны по всей веб-сайта не является редкостью, но infamous 99999 был рожден от frustration.Он часто используется в качестве простого способа, чтобы заставить элемент превыше всего, но z-index ES не всегда так просто.Это также не совсем масштабируемой: Что делать, если вам нужно что-то добавить к тому

?

Еще одна распространенная стратегия заключается в приращение Z-индекс values ³ двузначными цифрами, так что у вас есть комната для вставки и другие элементы позже, но это не решает проблему отслеживанияих все, и это не очень хорошо масштабируется, если вы хотите, чтобы добавить те между .

Каждый экземпляр Z-индекс возникает ряд вопросов:

1. Почему этот элемент иметь это значение Z-индекс?Что это означает в контексте любой другой элемент
2. Где оно вписывается в порядке и контексте других ценностей Z-индекс?Если я могу увеличить этот, на которые влияют другие
3. ? Если я добавлю элемент в стеке, значения которых Z-индекс, мне надо соответственно увеличить

Использование Sass Для поддержания Order

С Sass, контролируя все вышеперечисленные факторы легко использованием списков.Давайте использовать Behance ⁴ ‘ы главная страница в качестве примера:

⁵

Мы должны поддерживать порядок наложения проекта охватывает, фильтра-бар, место поиска режимная, пользовательский выпадающий выше модальных и навигация сайта, в указанном порядке, снизу вверх.Мы можем создать список Сасс, например, так:

$elements: project-covers, sorting-bar, modals, navigation;

Этот список представляет собой порядок, в котором мы хотим, чтобы наши элементы появляются, от низшего к высшему, с каждой индекса или положения, в массив, представляющий Z-индекс этого элемента.Мы можем использовать Sass index function ⁷ присвоить значение Z-индекс для каждого элемента .

Например:

.project-cover {
   z-index: index($elements, project-covers);
}

Это распечатать:

.project-cover {
   z-index: 1;
}  

Это потому, что project-cover является первым элементом в списке, с индексом 1, а самый низкий элемент в нашем Z-индекса порядке расположения.Давайте писать Sass для остальных элементов в нашем списке:

.sorting-bar {
   z-index: index($elements, sorting-bar);
}
.modal {
   z-index: index($elements, modals);
}
.navigation {
   z-index: index($elements, navigation);
}  

Теперь наша составлен CSS будет выглядеть следующим образом:

.project-cover {
   z-index: 1;
}
.sorting-bar {
   z-index: 2;
}
.modal {
   z-index: 3;
}
.navigation {
   z-index: 4;
}   

Теперь вы можете применить класс в элементах соответственно.Но что, если мы хотим, чтобы добавить элемент к существующему порядку размещения?Предположим, мы хотим добавить всплывающую подсказку, которая появляется, когда посетитель витает над пользователя, прежде Проект охватывает, но ниже всего остального .

⁸

С ванильным CSS, это изменение будет означать того, чтобы обновить значения Z-индекс сортировки бар, модальных и навигации.С Sass, мы просто должны обновить список с нашим новым элементом:

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;   

Поскольку значения Z-индекс сортировки бар, модальностей и навигации изменились в списке (они имели значения 2, 3 и 4, но сейчас 3, 4 и 5), наша составлен CSS будут автоматически корректировать свои значения Z-индекс, используя свои новые позиции.Давайте добавим эту новую линию Sass:

.user-tooltip {
   z-index: index($elements, user-tooltip);
}  

Это сделает скомпилированный CSS выглядеть следующим образом:

.user-tooltip {
   z-index: 2;
}
.sorting-bar {
   z-index: 3;
}
.modal {
   z-index: 4;
}
.navigation {
   z-index: 5;
}

Масштабирование решения всей Укладка Contexts

Предположим, наша разметка является еще более сложной, с множеством контекстов укладки и штабелирования заказов.(Помните, что для того, чтобы значение Z-индекс элемента, чтобы иметь эффект, его position не должно быть static. Это то, что создает новый контекст стэка, давая каких-либо дочерних элементов укладкизаказать специфическое для своих родителей.) В этом случае, один линейный список, возможно, не будет достаточно.Вместо этого, мы можем создать столько списков, сколько нам нужно, каждый из которых будет рассматриваться один контекст .

¹⁰

$elements: project-covers, user-tooltip, sorting-bar, modals, navigation;
$modal-elements: fields, form-controls, errors, autocomplete-dropdown;

.modal {
   z-index: index($elements, modals);

   .field {
      z-index: index($modal-elements, fields);
   }
   .form-controls {
      z-index: index($modal-elements, form-controls);
   }
   .error {
      z-index: index($modal-elements, errors);
   }
   .autocomplete-dropdown {
      z-index: index($modal-elements, autocomplete-dropdown);
   }

} /* .modal */

Это ко …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → 12.06.2014 by coding.smashingmagazine.com