Клик проходит элемент, когда есть наложение - как это работает?

Question

Я нашел способ настроить элемент ввода файла, поместив обычную кнопку «перед ним» и сделав элемент ввода файла с opacity: 0.Например:

#wrapper {
  position: relative;
  overflow: hidden;
}

#button-on-top {
   width: 200px;
   padding: 10px;
}

#file-input-below {
   position: absolute;
   top: 0;
   left: 0;
   width: 200px;
   padding: 10px;
}

<div id="wrapper">
   <button id="button-on-top">Upload</button>
   <input type="file" id="file-input-below">
</div>

Но почему это работает, когда вы нажимаете кнопку «выше», щелчок переходит к кнопке ввода реального файла и активирует ее?Обычно, когда есть элемент «ниже» другого, он не регистрирует щелчок.

Например, с различными видами наложений, когда кнопки внизу не могут быть нажаты?

Спасибо за предварительное объяснение.

Answer 1

HTML-файлы отображаются сверху вниз, поэтому поле ввода отображается позже.Это означает, что если вы поместите абсолютное значение для своей кнопки, поле ввода будет скользить под ним.

Но если вы поместите свою кнопку ниже, ваша кнопка будет скользить под вашим полем ввода.

Если вы все еще хотите сделатьэто работает, поместите для вашей кнопки индекс-z 1

   #button-on-top {
    z-index: 1;
     }

, и у вашего поля ввода должен быть меньший индекс z, чем у вашей кнопки, если вы хотите, чтобы ваша кнопка была нажимаемой

  #file-input-below {
  z-index: -1;
}