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索引应比按钮的z-index低

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

重叠时，点击会穿过元素-它是如何工作的？

1 个答案: