Работа с z-index

В библиотеке Driver.js управление видимостью элементов, подсветкой и оверлеями тесно связано с корректной настройкой z-index. z-index определяет порядок наложения элементов на странице и напрямую влияет на то, какой элемент будет находиться поверх других в процессе пошагового руководства. Неправильное управление этим свойством может привести к тому, что подсветка не видна, оверлей перекрывает контент или шаги не отображаются корректно.

Приоритеты слоев в Driver.js

Driver.js использует несколько ключевых слоев:

  1. Overlay – затемнённая область вокруг подсвечиваемого элемента.

    • Обычно имеет z-index: 1000.
    • Заблокирует взаимодействие с остальными элементами страницы.

  2. Highlight – рамка или эффект подсветки вокруг целевого элемента.

    • Должен иметь z-index выше overlay, чтобы быть видимым.
    • В стандартной конфигурации Driver.js это z-index: 1001.

  3. Tooltip / Popover – всплывающие подсказки и инструкции.

    • Должны располагаться поверх всех остальных слоев, чтобы оставаться читаемыми.
    • Типичный z-index: 1002 и выше.

Ключевой момент: если целевой элемент сам имеет высокий z-index, подсветка может оказаться скрытой. В таких случаях требуется либо изменить z-index целевого элемента, либо воспользоваться опцией zIndex в конфигурации Driver.js.

Настройка z-index через конфигурацию

Driver.js позволяет задать z-index на уровне всей библиотеки и для отдельных шагов:

const driver = new Driver({
    opacity: 0.75,
    padding: 10,
    allowClose: false,
    zIndex: 2000 // общий z-index для всех слоев
});
  • Параметр zIndex влияет на overlay, highlight и tooltip одновременно.
  • Если требуется более точное управление, можно переопределять z-index через кастомные CSS-классы.

Пример настройки для отдельного шага:

driver.defineSteps([
    {
        element: '#button1',
        popover: {
            title: 'Кнопка 1',
            description: 'Это важная кнопка',
            position: 'bottom',
        },
        zIndex: 3000 // только для этого шага
    }
]);

Управление конфликтами с существующими элементами

На практике часто встречается ситуация, когда элементы страницы имеют собственный z-index, превышающий стандартные значения Driver.js. Для решения этой проблемы существуют следующие подходы:

  1. Повышение z-index через конфигурацию

    • Использовать более высокий zIndex при создании Driver или для конкретного шага.

  2. Использование CSS для принудительной подсветки

    .driver-highlight {
    z-index: 5000 !important;
}

  3. Обновление DOM-структуры

    • Перемещение подсвечиваемого элемента ближе к корню DOM, если он скрыт из-за контекста стека наложения.

  4. Контроль родительских элементов

    • Любой родитель с position: relative и высоким z-index может ограничивать видимость highlight.
    • В таких случаях либо понизить z-index родителя, либо использовать опцию allowClickThrough для overlay.

Динамическое управление z-index

Driver.js позволяет изменять z-index на лету, что полезно для адаптивных интерфейсов или интерактивных приложений:

driver.on('next', step => {
    if(step.element.id === 'modalButton') {
        driver.updateStep({
            zIndex: 4000
        });
    }
});
  • Событие next срабатывает при переходе к следующему шагу.
  • Метод updateStep позволяет изменять настройки текущего шага без перезапуска всей библиотеки.

Важные нюансы

  • CSS-свойство position обязательно для элементов с z-index: relative, absolute, fixed или sticky. Без него z-index не будет работать.
  • Tooltip всегда должен иметь самый высокий z-index, иначе подсказка окажется за overlay или другими элементами страницы.
  • Overlay и highlight должны быть синхронизированы, чтобы подсветка не уходила за пределы затемнённой области.
  • Для сложных интерфейсов с модальными окнами рекомендуется использовать zIndex выше модального слоя, иначе подсветка и tooltip будут скрыты.

Практическое правило

  • Overlay – zIndex = 1000
  • Highlight – zIndex = overlay + 1
  • Tooltip – zIndex = highlight + 1

Если на странице есть элементы с z-index > 2000, значения всех слоев Driver.js необходимо увеличивать пропорционально. Это гарантирует корректное отображение всех шагов и предотвращает конфликт с другими компонентами интерфейса.

Таким образом, правильная работа с z-index в Driver.js обеспечивает видимость подсветки, правильное расположение оверлеев и всплывающих подсказок, а также корректное взаимодействие с элементами интерфейса без нарушения пользовательского опыта.

Оглавление