How to hide an element without taking up space and still respond to events?

Question

display:none takes the element away from the layout flow and thus not taking up space on the page but its events get disabled.

visibility:hidden hides the element, but the element still takes up space.

I need a way to hide a file input element without taking up space and responding when I call its .click() event.

Example

Answer 1

Simply setting opacity to 0 should work. The element won't show up, and it wont take space either. And its events will work.

When giving opacity, also specify the opacity counterparts of all browsers (-moz.., -webkit, filter: ..) etc.. to ensure cross-browser compatibility.

EDIT

Your style should look something like:

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

Working demo here: http://jsfiddle.net/t2BHg/6/

Answer 2

Setting display: none; does not disable events for an element, but it will prevent it from being clicked because the element has no pixel dimensions to click into. You can still call its onclick events programmatically. See an example