Question

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

我很亲密，但不在那里。请参阅https://output.jsbin.com/yivitupaqe/1

如图所示，对于示例1,2和3，input被按下了一点。我可以通过删除添加了输入的元素上的样式来修复它，但不要＆＃ 39;我希望这样做。对于示例4，它是关闭的，我想我需要让jQuery以某种方式检测原始元素是替换元素还是未替换元素。

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

＆＃13;

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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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/

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

1 个答案: