Css 如何用透明输入覆盖div？

我正在构建一个小的上传元素

它是一个div（实际上是一张vue/类星体卡，但我想这并不重要），它的响应速度和大小取决于窗口大小和视口

它包含一个保存输入和其他div的表单

问题：

输入应该是透明的，并且只提供功能。我希望另一个div正好位于它下面，并显示一个图标和文本。input和internaldiv都应该完全填充封闭元素

到目前为止我所尝试的：

背景

位置：绝对

和

相对

，使用

z-index

。 当位置是相对的时，将宽度和高度设置为100%是可行的，但元素彼此相邻。使用绝对位置时，覆盖层起作用，但输入元素变得比其父元素大得多。 我不能直接设置它的大小

将文档放在此处

如果我正确理解了您的问题，那么您应该为您的输入创建标签，隐藏输入并按照您想要的方式设置标签样式。通过id和for连接标签和输入，然后您将能够单击标签上载文件

这里有一个例子

[类型=文件]{
位置：绝对位置；
宽度：100%；
身高：100%；
不透明度：0；
排名：0；
}
标签{
背景颜色：金色；
宽度：250px；
高度：50px；
边界半径：8px；
显示：块；
位置：相对位置；
}
标签跨度{
显示器：flex；
宽度：100%；
身高：100%；
对齐项目：居中；
证明内容：中心；
}
[类型=文件]：悬停{
光标：指针；
}

单击我或将文件拖到此处

欢迎使用堆栈溢出！寻求代码帮助的问题必须包含在问题中重现问题所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请参阅。在问题中粘贴代码-而不是作为链接。而且，这已经被问了1000次了，所以。。只需在谷歌上搜索一下Firstfyi，不透明是透明的反面；我怀疑这就是你真正的意思。谢谢@treyBake-我改了。我已经研究并尝试调整了几个小时的解决方案（大多数都是将叠加元素的宽度直接设置为1304px或其他-如果你在图像上制作一个叠加，你知道它的大小…），但我无法让它工作。如果我以前没有亲自尝试过，我也不会问。我只是意识到这确实会删除拖放功能。。只有输入对它有反应，而不是标签。@leo我编辑了我的答案，这样你就可以保留拖放功能了