javascript - 如何将一个元素精确地放置在另一个元素上？

Question

如何将 input 元素完美地放置在另一个元素上？

我很接近，但还没有。请参阅https://output.jsbin.com/yivitupaqe/1

正如所见，对于示例 1、2 和 3，input 被向下推了一点。我可以通过删除添加了输入的元素上的样式来修复它，但不想这样做。对于示例 4，它还很遥远，我想我需要让 jQuery 以某种方式检测原始元素是替换元素还是非替换元素。

PS。请解释导致此行为的原因。

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

我花了一些时间将你的 jsbin 代码重新创建到 jsfiddle 中，简化它并尝试在评论中说明我的建议。由于目标元素的类型不同，这有点麻烦，因此您会看到略有不同的效果，但对于主要部分，目标元素被 input 元素覆盖。

要点是:

• “原始”目标元素具有 display 和 width 样式，这些样式被添加到包装所有内容的外部 div 中，它还具有position:relative规则
• 将原始元素e包裹在新的div中后，获取div的外部尺寸
• 内部 input 可以具有标准的 absolute 和 0 位置样式，以及与外部 相同的宽度和高度div

这给了我们结果:

• 示例 1 - 完全覆盖链接文本，但不覆盖顶部和底部内边距
• 示例 2 - 完全覆盖黄色框，除了右侧的微小边框等效边缘
• 示例 3 - 完全覆盖黄色框
• 示例 4 - 完全覆盖黄色框，但在未找到图像时通过等效边框稍微重叠

希望这足以让您使用并进一步调整以获得所需的精确元素覆盖级别，可能会处理不同的目标元素类型以获得精确的覆盖区域。

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