How do I place one element precisely over another element?

Question

How do I place an input element perfectly over another element?

I am close, but not there. Please see https://output.jsbin.com/yivitupaqe/1

As seen, the input is pushed down a bit for examples 1, 2, and 3. I could fix it by getting rid of the style on the elements which had the input added to it, but don't wish to do so. For the example 4, it is way off and I think I will need to have jQuery somehow detect if the original element is a replaced or non-replaced element.

PS. Please provide explanation of what causes this behavior.

 function overlayInput(e) { var margin = e.css('margin-top') + ' ' + e.css('margin-right') + ' ' + e.css('margin-bottom') + ' ' + e.css('margin-left'); var input = $('<input/>', { type: 'file', name: 'bla', style: 'position:absolute;top: 0; bottom: 0; left: 0; right: 0;cursor:pointer;z-index:9999;opacity:0;filter:alpha(opacity=0);height:' + e.outerHeight(false) + 'px;width:' + e.outerWidth(false) + 'px;padding:0;margin:' + margin //Padding shouldn't matter }); e.wrap($('<div/>', { style: 'position:relative; display:' + e.css('display') + ';margin:0;padding:0' })) .parent().append(input); console.log(e, input[0]) } $(function() { var e1 = $('#e1'), e2 = $('#e2'), e3 = $('#e3'), e4 = $('#e4'); overlayInput(e1); overlayInput(e2); overlayInput(e3); overlayInput(e4); }); 

 #e1, #e2, #e3, #e4 { border: 5px solid black; margin: 10px; padding: 5px; background-color: yellow; } #e2 { width: 300px; } div { margin-top: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div>Example 1 (non-replaced inline element)<a id="e1" href="javascript:void(0)">Hello</a>bla bla bla</div> <div>Example 2 (block element with width) <p id="e2">Hello</p>bla bla bla</div> <div>Example 3 (block element without width) <p id="e3">Hello</p>bla bla bla</div> <div>Example 4 (non-replaced inline element) <img id="e4" alt="hi" src="http://icons.iconarchive.com/icons/hopstarter/sleek-xp-software/48/Yahoo-Messenger-icon.png" />bla bla bla</div> 

Answer 1

I have taken a bit of time and recreated your jsbin code into jsfiddle, simplifying it and trying to illustrate my advice in the comments. It is a bit fiddly with the target elements being different types so you see slightly different effects, but for the main part, the target elements are covered with the input elements.

The key points are:

• the 'original' target elements have the display and width styles that get added to the outer div that wraps everything, it also has the position: relative rule
• after wrapping the original element e in the new div , get the outer dimensions of the div
• the inner input can then have the standard absolute and 0 position styles along with the same width and height as the outer div

This gives us the results:

• Example 1 - completely covers the link text, but not the top and bottom padding
• Example 2 - completely covers the yellow box except for tiny border equivalent edge at the right hand side
• Example 3 - completely covers the yellow box
• Example 4 - completely covers the yellow box, but overlaps slightly by border equivalents when no image found

Hopefully this will be enough for you to work with and tweak further to get the exact levels of element coverage that you require, possibly handle different target element types to get exact coverage areas.

https://jsfiddle.net/sc7y67q0/1/