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

使用position: absolute;定位的元素不会占用任何实际高度。您的position: relative; div现在的高度也为0，因为它的子节点都不占任何高度。

只需在此div中添加一个高度，您的元素应该按预期运行：

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

编辑：如果您不想要强制身高，this solution Scott Marcus的in this comment可能会更好。

Answer 2

正如@Santi指出的那样，绝对定位元素的内容实际上并没有对设置元素的height做出贡献。但是，您可以将height样式更改为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>

现在，应该说你应该避免使用内联样式，因为它们会创建意大利面条代码，不会促进代码重用，以后很难覆盖，如果你需要和，它似乎是你实际上尝试的可以用基本的HTML完成，根本没有CSS：

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

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

2 个答案: