Question

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

问题是，即使最简单的例子似乎也没有正确对齐......

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

您可以看到输出here。

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

有关元素定位的更多信息，请参见here。

Answer 1

实际上div元素“是”呈现在pre元素之上。我们只是无法看到它。我添加了一个border css属性来显示它，因为它有“预留余量”。

<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

Answer 2

默认情况下，pre标记的边距为margin: 1em 0px;，因此您需要将边距设置为零以覆盖此范围。然后在此之后仍然存在少量差距。这是因为字体。在我的例子中。我已覆盖font-family以继承父级的font-family，因此元素完全对齐。另一件事是，对于font-family代码而不是div代码{/ 1}}，可以执行相同的相反效果

pre

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

HTML为什么这两个元素没有直接放在彼此的顶部？

2 个答案: