Управление наложением элементов

Виджеты, которые накладываются друг на друга или выходят вперёд других элементов, часто создают проблемы при размещении на реальных страницах. Обычно легко изменить z-index или родителя накладываемого элемента, чтобы избежать конфликтов на странице. Однако jQuery UI требуется общее решение, которое не требует ручного изменения значений z-index. Это достигается с помощью класса ui-front, и обычно сопутствующего параметра appendTo для виджетов наложения.

Класс ui-front

Класс ui-front очень простой. Он просто устанавливает статическое значение z-index для элемента. Однако существование класса используется для обозначения того, что элемент является элементом наложения, что указывает, куда должны быть добавлены дополнительные элементы наложения. Это позволяет использовать контексты вложенного наложения, что приводит к стандартному положению в DOM, которое работает для большинства случаев.

Примечание: При использовании ui-front, необходимо также установить position в значение relative, absolute или fixed, чтобы наложение z-index применилось.

Метод наложения

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

• Если для параметра appendTo задано значение, то элемент наложения должен быть добавлен в указанный элемент.
• Если параметр appendTo установлен в значение null (по умолчанию), то виджет должен пройти по дереву DOM от связанного элемента. Например, когда меню автозаполнения добавляется в DOM, обход начинается с связанного элемента ввода.
  • Если другой элемент наложения найден, элемент добавляется к этому элементу.
  • Если другие элементы наложения не найдены, элемент добавляется к телу страницы (body).
• Элемент наложения также должен иметь position установленным в значение relative, absolute, или fixed, чтобы наложение z-index из класса ui-front было применено. Использование .position() автоматически установит position.

Элементы наложения определяются как элементы с классом ui-front, или любые встроенные элементы, которые создают новый контекст наложения. В настоящее время <dialog> — это единственный встроенный элемент, который считается элементом наложения.