如何将一个元素精确地放置在另一个元素上? [英] How do I place one element precisely over another element?

问题描述

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

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

我在附近，但不在那儿.请参阅 https://output.jsbin.com/yivitupaqe/1

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

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

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.请提供导致此行为的原因的解释.

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>

推荐答案

我花了一些时间，将您的jsbin代码重新创建到jsfiddle中，对其进行了简化并尝试在注释中说明我的建议.目标元素类型不同，这有点奇怪，因此您会看到略有不同的效果，但是对于主体部分，目标元素被input元素覆盖.

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.

关键点是:

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

• 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

这为我们提供了结果:

• 示例1-完全覆盖了链接文本，但没有覆盖顶部和底部的填充
• 示例2-完全覆盖了黄色框，除了右侧的小边框等效边
• 示例3-完全覆盖黄色框
• 示例4-完全覆盖了黄色框，但是在没有图像的情况下按边界等价线略有重叠

希望这对您来说足够了，可以进行进一步的调整以获取所需的确切元素覆盖级别，并可能处理不同的目标元素类型以获取确切的覆盖区域.

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/

这篇关于如何将一个元素精确地放置在另一个元素上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！