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

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

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

?

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

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

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

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

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

⁵

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

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

Этот список представляет собой порядок, в котором мы хотим, чтобы наши элементы появляются, от низшего к высшему, с каждой индекса или позиции, в массиве, представляющий г-индекс этого элемента.Мы можем использовать 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, это изменение будет означать того, чтобы обновить значения г-индекс сортировки бар, модальный и навигации.С Sass, мы просто должны обновить список с нашим новым элементом:

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

Поскольку значения г-индекс сортировки бар, модальностей и навигации изменили в списке (они были значения 2, 3 и 4, но сейчас 3, 4 33 ~ и|), наша составлен 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 */

Это компилирует:

.modal {

   z-index: 4;

}

.modal .fi ... 

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


 		
		
				
		
				

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