html - 像往常一样在相对定位元素内的绝对元素之后流动元素

Question

我试图将两个元素叠加在一起:

<div style="position: relative;">
    <input style="position: absolute; top: 0px; left: 0px">
    <div style="position: absolute; top: 3px; left: 3px;">
        XXXX-XX-XXX
    </div>
</div>

到目前为止一切顺利...这两个元素可以很好地重叠，并且无论 DIV 在页面上的哪个位置都可以正常工作。但随后我将下一个元素添加到页面:

<div>
PART 2 GOES HERE ABCDEFG
</div>

呃哦，我们有问题了!下一个元素被放置在前一个元素的之下。如何让后续内容回到正常的静态流中？其余内容不必知道这个特殊元素，即如果带有覆盖的元素插入文档中的任何位置，它的行为应该与它是相同大小的单个元素一样。

这是 Fiddle证明问题。

Answer 1

正如@Santi 所指出的，绝对定位元素的内容实际上并不影响设置元素的高度。但是，无需为 height 设置特定值(这可能不适用于所有视口(viewport))，您只需将 input 样式更改为 position:relative 以便设置它的高度。然后，您可以将叠加层放置在它上面。

<div>
Content that goes first.
</div>
<div style="position: relative;">
        <input style="position: relative;">
        <div style="position: absolute; top: 1px; left: 3px;">
            XXXX-XX-XXX
        </div>
</div>
<div>
    PART 2 GOES HERE ABCDEFG
</div>

现在，应该说你应该避免使用内联样式，因为它们会创建意大利面条代码，不要促进代码重用并且以后很难覆盖，如果你需要的话，看起来你实际上正在尝试do 可以用基本的 HTML 完成，根本不需要 CSS:

<div>
Content that goes first.
</div>
<div>
        <input placeholder="xxxx-xxx-xxx">
</div>
<div>
    PART 2 GOES HERE ABCDEFG
</div>