css - 在 Firefox 和 Chrome 中为具有 position:absolute 的元素呈现差异

Question

position:absolute显然，嵌套在spanwith中的元素position:relative在 Firefox 和 Chrome 中呈现不同。我有两个这样的元素需要span覆盖position:relative，问题是我无法在 Chrome 和 Firefox 中覆盖它们。

以下是描述该问题的图片：

火狐

铬合金

CSS：

.csv-upload-btn{
    position:relative;
    margin: 0 0 10px 4px;
    height:20px;
    width: 54px;

    #id_uploaded_file {
        position:absolute;
        z-index:2; 
        opacity:0;
        height: 16px;
        width: 47px;
    }

    .upload-btn {
        background: url(images/btn-upload-bg.png) repeat-x 0 0;
        position: absolute;
        padding: 0 5px;
        border-radius: 3px;
        color: #fff;
        width:47px;
    }
}

编辑：我知道这没什么好说的，但不幸的是，这就是我可以合法分享的全部内容。任何想法和建议将不胜感激。如果/何时可以联系到我的伴侣，我将提供更多详细信息

Answer 1

将您的#id_uploaded_file 设置为顶部：0，左侧：0。它是绝对定位的，但您尚未指定位置。

 #id_uploaded_file {
        position:absolute;
        top: 0;
        left: 0;
        z-index:2; 
        opacity:0;
        height: 16px;
        width: 47px;
    }

HTH。