HTML 为什么这两个元素不直接放在彼此之上？答案

【问题标题】：HTML why are these two elements not positioned directly on top of each other?HTML 为什么这两个元素不直接放在彼此之上？
【发布时间】：2018-03-19 13:36:56
【问题描述】：

我正在尝试编写一些 HTML 代码来将另一个元素直接覆盖在 pre 文本块的顶部。

问题是，即使是最简单的示例似乎也无法正确对齐...

<div style="position:relative">
<pre style="position:absolute">
hello
</pre>
  <div style="position:absolute">
    world
  </div>
</div>

你可以看到输出here。

div 元素呈现在pre 元素上方。为什么会这样？

更多关于元素定位的信息可以在here找到。

【问题讨论】：

标签： html layout css-position

【解决方案1】：

实际上div 元素“是”呈现在pre 元素之上。我们只是无法看到它。由于“预边距”，我添加了一个 css 的 border 属性以将其可视化。

<div style="position:relative">
  <pre style="position:absolute">
hello
</pre>
  <div style="position:absolute; border:1px solid red;">
    world
  </div>
</div>

也就是说，你现在可以添加一些css 来稍微改变一下，得到你想要的，就像这样！！

<div style="position:relative">
  <pre style="position:absolute">
hello
</pre>
  <div style="position:absolute; border:1px solid red; top: 7px">
    world
  </div>
</div>

希望有帮助！！事实证明，pre 标签顶部有一些默认的margin。看看这个看看！！

查看Fiddle

所以要删除它，很简单，将 margin 设置为 0。Fiddle

【讨论】：

顺便说一下pre标签的边距，看看这个(stackoverflow.com/questions/35676687/…)

【解决方案2】：

pre 标签的默认边距为margin: 1em 0px;，因此您需要将边距设置为零以覆盖它。然后在这之后还有少量的差距。这是因为字体。在我的例子中。我已经覆盖了font-family 以继承父级的font-family，因此元素完全对齐。另一件事是，对于 font-family 可以为 div 标签而不是 pre 标签做同样的反之亦然效果

pre{
margin:0px;
font-family:inherit;
}

<div style="position:relative">
<pre style="position:absolute">
hello
</pre>
  <div style="position:absolute">
    world
  </div>
</div>

【讨论】：