самый высокий Z-индекс, но не может нажать на изображение

Question

Я создаю этот веб-сайт: https://www.melkerhei.be/smeltkroes/index.html

Ло go в левом верхнем углу должно быть кликабельным. Это код:

  <header>
    <div class="header">
      <div class="logo_box_top" style="z-index:20">
                 <a href="index.html" style="z-index:20">
                          <img src="assets/img/logo.png" alt="Smeltkroes">
                  </a>
      </div>
    </div>
  </header>

Возможно, навигационная панель в середине находится в пути. Я много пробовал, меняя позиции и z-index'ы элементов, но ничего не работает. Как я могу решить это?

Answer 1

При pointer-events: none в классе .header все дочерние элементы также будут по умолчанию отключены для событий указателя.

Документация для pointer-events: none; состояний:

Элемент никогда не является целью событий указателя; однако, события указателя могут предназначаться для его элементов-потомков, если у этих потомков для событий-указателей установлено какое-то другое значение. В этих обстоятельствах события указателя будут запускать прослушиватели событий на этом родительском элементе в зависимости от ситуации на пути к / от потомка во время фаз захвата событий / пузырей.

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

Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

РЕДАКТИРОВАТЬ

Исходя из ваших комментариев, вот ваше решение:

• Оставьте pointer-events: none; в классе .header.
• Добавьте pointer-events: all; к элементу привязки в заголовке.

Тогда вы все равно можете щелкнуть ссылку заголовка, не затрагивая другие слои.

Answer 2

Z-index ничего не может сделать, потому что нет позиции, Z-index всегда работает с позициями, например:

logo_box_top { 
  z-index: 20;
  position: static;
}

Вы можете использовать относительный, абсолютный и т. Д. c