如何在不占用空间的情况下隐藏元素，同时还能响应事件

Question

display:none将元素从布局流中移除，因此不占用页面空间，但其事件被禁用。

visibility:hidden隐藏了元素，但是元素仍然占用空间。

我需要一种方法来隐藏一个文件输入元素，而不占用空间和响应，当我调用它的.click()事件。

示例

Answer 1

将不透明度设置为0就可以了。元素不会出现，也不会占用空间。并且它的事件可以工作。

当指定不透明度时，还要指定所有浏览器的不透明度对应项(-moz..)， -webkit，过滤器:…)等。以确保跨浏览器兼容性。

编辑

你的样式应该看起来像:

.mydiv {
  position: absolute;
  left: 10px; /* change as needed */
  top: 10px; /* change as needed */
  opacity: 0;
}

工作演示在这里:http://jsfiddle.net/t2BHg/6/

Answer 2

设置display: none;不会禁用元素的事件，但它会阻止它被点击，因为元素没有像素尺寸可以点击。您仍然可以通过编程方式调用它的onclick事件。参见示例

Answer 3

如何使其不可见，但绝对定位在屏幕左侧:

CSS:

#yourelement, .hidden {
   visibility : hidden;
   position   : absolute;
   left       : -1000px;
   width      : 1px;
   height     : 1px;
   overflow   : hidden;
}

Answer 4

Less code:

position: fixed; z-index: -1;

Answer 5

可以设置为visibility: hidden，宽度和高度设置为0