流动的元素作为常规的后一个绝对的相对定位的元素内

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。但是，您可以将input样式更改为position:relative，而不是为height（对于所有视口可能不正确）设置具体值，以便设置其高度。然后，您可以将覆盖层放在它的顶部。

<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>

Answer 2

使用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可能会更好。