Z-порядок — это упорядочение перекрывающихся двумерных объектов, таких как окна в многоуровневом оконном менеджере , фигуры в редакторе векторной графики или объекты в 3D-приложении. [1] Одной из особенностей типичного графического пользовательского интерфейса является то, что окна могут перекрываться, так что одно окно скрывает часть или все другое. Когда два окна перекрываются, их Z-порядок определяет, какое из них появится поверх другого.
Термин «Z-порядок» относится к порядку объектов вдоль оси Z. В координатной геометрии X обычно относится к горизонтальной оси (слева направо), Y к вертикальной оси (вверх и вниз), а Z относится к оси, перпендикулярной двум другим (вперед или назад). Окна в графическом интерфейсе можно представить как серию плоскостей, параллельных поверхности монитора. Таким образом, окна располагаются вдоль оси Z, и информация о порядке Z, таким образом, определяет порядок расположения окон на экране спереди назад. Аналогией можно было бы назвать несколько листов бумаги, разбросанных по столу, причем каждый лист представляет собой окно, стол — экран вашего компьютера, а верхний лист имеет наибольшее значение Z.
Обычно пользователи графического пользовательского интерфейса могут влиять на Z-порядок, выбирая окно, которое будет выводиться на передний план (то есть «над» или «перед» всеми остальными окнами). Некоторые оконные менеджеры позволяют взаимодействовать с окнами, пока они не находятся на переднем плане, в то время как другие выводят окно на передний план всякий раз, когда оно получает ввод от пользователя. Также возможно назначить специальные окна «всегда сверху»; затем они фиксируются в верхней части Z-порядка, так что (за некоторыми исключениями) никакое другое окно не может их перекрывать.
При работе с визуальными объектами на экране компьютера объект с Z-порядком 1 будет визуально находиться «под» объектом с Z-порядком 2 или выше. Это то же самое, что создавать «слои» объектов, где Z-порядок определяет, какой объект находится поверх другого. HTML-страница может использовать CSS для указания Z-порядка, чтобы одни объекты можно было накладывать поверх других.
Z-упорядочение также используется в 3D-приложениях для определения видимости объекта на основе перекрытия других объектов. Это дает пользователю преимущество в скорости, поскольку компьютеру не нужно отображать невидимые объекты. [1] На практике, конечно, некоторые объекты могут быть затемнены лишь частично, и это сложность, которую необходимо учитывать.
Фактическое число, присвоенное определенному месту в Z-порядке, иногда называют z-индексом. В частности, свойство CSS , которое устанавливает порядок стека определенных элементов, известно как z-индекс. Элемент с более высоким порядком стека всегда находится перед другим элементом с более низким порядком стека. [2]
п { позиция : относительная ; z-индекс : -1 ; } Таким же образом можно использовать и отрицательные стековые ордера. Отрицательное значение появится позади положительного. z-indexработает только с элементами, имеющими значение позиции (например, position: relative;), и для многих программистов это одна из первых вещей, которые необходимо выяснить при отладке, почему z-индекс не работает. [3]
Как и все другие свойства CSS, его можно установить с помощью JavaScript , используя следующий синтаксис:
объект . стиль . zИндекс = '1' ;