为什么绝对和相对定位在 Firefox 中不能按预期工作？

Question

为什么下面的小提琴只在 Firefox 中不能正常工作（文本消失）？

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

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

标记和 CSS

HTML：

<button id="Ctrl" class="button" type="button">Query</button>
<div id="file" class="file-label appletButton">
New File
<input id="FileInput" class="file-input" type="file" name="fileinput" multiple></div>

CSS

.file-input {
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    top: 0;
    right: 0;
    margin: 0;
    border: solid transparent;
    border-width: 0 0 100px 200px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=0)';
    -moz-transform: translate(-300px, 0) scale(4);
    -o-transform: 'translate(250px, -50px) scale(1)';
}
.file-label {
    padding: 5px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.appletButton {
    background: linear-gradient(to bottom, #8ABAFE 0%, #5788C7 100%) repeat scroll 0 0 transparent;
    border: 1px solid #31537F;
    color: #F5F5F5;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}

---

http://jsfiddle.net/6ZuPM/7/

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

Answer 1

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

当某物获得焦点时，浏览器会尝试将其滚动到视图中。因此，在这种情况下，<div class="file-label"> 会滚动，但需要滚动多远才能将文件输入显示在视图中，这会将文本滚动到视图之外。

Answer 2

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

 position:relative;

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

 position:absolute;

从页面流中删除您的元素。它以 body 元素为原点，除非它嵌套在 position:relative element (your example) 中，否则 position:absolute 元素以其父元素为原点。