Блог

Я нашел метод настройки элемента ввода файла, поместив обычную кнопку «перед ним» и создав элемент ввода файла с помощью 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>
  

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

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

Заранее благодарю вас за объяснение.

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

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

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

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

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

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