Css 为什么绝对和相对定位在firefox中不能像预期的那样工作？

为什么只有在firefox中，下面的fiddle不能正常工作（文本消失）

我想在下面的小提琴中做的是

我不喜欢浏览器的文件上传控件，我正在创建CSS，让它看起来像一个按钮。文件上载控件包含在div中，并通过不透明属性隐藏。CSS被添加到外部div中，使其看起来像一个按钮

标记和CSS HTML:

---

---

在上面的小提琴中，首先点击“查询”按钮。然后按TAB键。“新文件”文本消失。但您仍然可以通过单击蓝色按钮来调用浏览窗口。文本为何消失？

关于位置：相对和位置：绝对：

 position:relative;

将元素保留在页面流中，您甚至可以在其上指定浮动。它起源于它的父代

 position:absolute;

---

从页面流中删除元素。它以body元素为原点，除非嵌套在position:relative元素（您的示例）中，否则position:absolute元素以其父元素为原点。

当您点击tab时，浏览器会将焦点放在文件输入上，因为这是tab顺序中的下一项内容

 position:absolute;

---

当某些内容被聚焦时，浏览器会尝试将其滚动到视图中。因此，在这种情况下，

会被滚动，无论需要滚动多远，才能将文件输入显示在视图中，从而将文本滚动到视图之外。

您能再解释一下您想要实现的目标吗？我在chrome和firefox上有相同的显示（除了您以mozilla风格编码的渐变背景）我试图隐藏文件上载控件。最重要的是，我想显示类似按钮的CSS样式。在上面的示例中，我面临的问题是，当我按TAB键时，文件上载控件上的文本将消失。我希望即使我使用制表符，文本也会在那里。绝对定位的元素将相对于下一个父元素位于上方，并具有

位置

，而不是

静态

（默认值），这要感谢精确性，我不确定这是否会有任何帮助，我如何才能避免这种情况？通过相应地设置tabindex，使文件输入不可为tab焦点？你好，Boris。我试过使用tabindex。在父窗口中工作正常。但是在jquery弹出窗口中。。。我无法打开文件选择对话框。知道为什么吗？@user1853164不是立即的，不是。文本消失问题可以通过在“.file input”中添加“font size=100px”来解决，并且必须删除“Width=100%”。但字体大小不限于100px。您可以根据需要增加其价值。

 position:absolute;