如何隐藏元素而不占用空间并仍然响应事件？

Question

display:none使元素远离布局流，因此不占用页面上的空间，但其事件被禁用。

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

我需要一种方法来隐藏文件输入元素而不占用空间并在我调用其.click()事件时进行响应。

Example

Answer 1

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

Answer 2

只需将不透明度设置为0即可。元素不会出现，也不会占用空间。它的事件将起作用。

在提供不透明度时，还要指定所有浏览器的不透明度对应物（-moz ..， - webkit，filter：..）等..以确保跨浏览器兼容性。

修改

你的风格应该是这样的：

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

此处的演示演示：http://jsfiddle.net/t2BHg/6/

Answer 3

如何让它不可见，但绝对定位在屏幕左侧：

CSS：

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

Answer 4

您可以将其设为可见性：隐藏并将宽度和高度设置为0

Answer 5

少代码：

position: fixed; z-index: -1;