input[type='file'] 遮住相邻控件的问题

1.事情是这样的，有一个上传按钮和一个下载按钮紧靠在一起。美化好上传按钮，发现点击下载按钮也会弹出来文件对话框。

css如下：

input[type='file'] {
    display: inline-block;
    width: 100%;
    height: 26px;
    opacity: 0;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
}

2.调试了很久隐藏的文件控件还是一直会被点到，chrome查看元素如下：

看不出有超出遮盖下载控件的迹象；

但实际上确实已被遮住

3.后面谷歌到结果，在父标签加属性overflow:hidden能够解决这个问题。

如下：

style="position: relative;overflow: hidden"