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

如何将

输入

元素完美地放置在另一个元素上

我很接近，但不在那里。请看

如图所示，对于示例1、2和3，

输入被向下推一点。我可以通过去掉元素上添加了输入的样式来修复它，但我不希望这样做。对于示例4，这是一个很大的问题，我想我需要让jQuery以某种方式检测原始元素是替换的还是未替换的元素

请解释导致这种行为的原因


函数覆盖输入（e）{
var margin=e.css（'margin-top'）+''+e.css（'margin-right'）+''+e.css（'margin-bottom'）+''+e.css（'margin-left'）；
变量输入=$（''{
键入：“文件”，
名称：“bla”，
样式：“位置：绝对；顶部：0；底部：0；左侧：0；右侧：0；光标：指针；z索引：9999；不透明度：0；过滤器：alpha（不透明度=0）；高度：'+e.outerHeight（false）+'px；宽度：'+e.outerWidth（false）+'px；填充：0；边距：'+margin//padding应该不重要
});
e、 包装（$（''）{
样式：“位置：相对；显示：”+e.css（“显示”）+”；边距：0；填充：0”
}))
.parent（）.append（输入）；
console.log（e，输入[0]）
}
$（函数（）{
变量e1=$（'#e1'），
e2=$（'#e2'），
e3=$（“#e3”），
e4=$（“#e4”）；
叠加输入（e1）；
叠加输入（e2）；
叠加输入（e3）；
叠加输入（e4）；
});
#e1，
#e2，
#e3，
#e4{
边框：5px纯黑；
利润率：10px；
填充物：5px；
背景颜色：黄色；
}
#e2{
宽度：300px；
}
div{
边缘顶部：50px；
}

示例1（未替换的内联元素）bla bla bla
示例2（带宽度的块元素）
你好

示例3（不带宽度的块元素）
你好
示例4（未替换的内联元素）
bla bla bla
我花了一点时间，将您的jsbin代码重新创建到JSFIDLE中，对其进行了简化，并试图在注释中说明我的建议。目标元素的类型不同，因此效果略有不同，但对于主要部分，目标元素由
输入
元素覆盖

重点是：


“原始”目标元素具有
显示
和
宽度
样式，这些样式添加到包装所有内容的外部
div
，它还具有
位置：相对
规则
将原始元素
e
包装在新的
div
中后，获取
div
内部
输入
可以具有标准
绝对
和
0
位置样式以及与外部
div相同的宽度和高度

这给了我们以下结果：


示例1-完全覆盖链接文本，但不覆盖顶部和底部填充
示例2-完全覆盖黄色框，除了右侧的微小边界等效边缘
示例3-完全覆盖黄色框
示例4-完全覆盖黄色框，但在未找到图像时，会略微重叠边框等同物

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

我花了一些时间，将您的jsbin代码重新创建到JSFIDLE中，对其进行了简化，并试图在注释中说明我的建议。目标元素的类型不同，因此效果略有不同，但对于主要部分，目标元素由
输入
元素覆盖

重点是：


“原始”目标元素具有
显示
和
宽度
样式，这些样式添加到包装所有内容的外部
div
，它还具有
位置：相对
规则
将原始元素
e
包装在新的
div
中后，获取
div
内部
输入
可以具有标准
绝对
和
0
位置样式以及与外部
div相同的宽度和高度

这给了我们以下结果：


示例1-完全覆盖链接文本，但不覆盖顶部和底部填充
示例2-完全覆盖黄色框，除了右侧的微小边界等效边缘
示例3-完全覆盖黄色框
示例4-完全覆盖黄色框，但在未找到图像时，会略微重叠边框等同物

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

最简单的方法可能是让输入的“元素”始终是
div
，确保其具有
position:relative
以及需要内联的任何其他样式，带或不带宽度等。然后您可以将
输入添加到
div
中，并使其具有
位置：绝对；排名：0；底部：0；左：0；右图：0
这应该使它完全适合
div
如图所示，我在原始元素周围放置了一个
div
，位置：relative
。这不一样吗？我尝试添加
底部：0；右：0
但没有更改。奇怪的是，添加底部和右侧会做什么？因此
输入直接位于
div
中？将所有方向设置为0意味着所有四条边都接触其父方向edges@Starscream1984这将是完美的，但它似乎不起作用。我有最新消息