html - 尝试了我能找到的所有建议，仍然无法让子元素留在父元素中

Question

所以我已经尝试了在每个站点上讨论并用于解决此问题的所有方法(溢出:隐藏/溢出:自动/清除:两者/高度:自动；父是相对的；子是绝对的)我终于创建一个 stackoverflow 帐户。

我似乎无法将文本保存在父容器中。我发誓这只是我忘记的非常小的事情。

这是它的 JSFiddle..

http://jsfiddle.net/kMGQC/15/

HTML

<div id="red">
<h1 class="whiteHeading">Headline</h1>
    <h2 class="whiteP"> SubHead</h2>
</div>

CSS

#red{
    background-color: #cc0033; 
    overflow:auto; 
    position:relative; 
    min-height: 75px; 
    clear:both;}
#red h1{
    position: absolute; 
    left:25px;top: 0px;
    font-size: 18px; }
#red h2{
    position: absolute; 
    left:25px;
    top: 75px; 
    width: 250px;}
#red p{
    color: FFFFFF;}

我已经为父级添加了一个最小高度，这样我就可以判断父级是否扩展到包括两个子级。

Answer 1

相对定位的目的是将多个对象并排放置，而不会使它们实际重叠。你的 div 引起了矛盾，并使你的 h2 标签从 div 中消失，因为定位然后溢出将它们隐藏在一起。这是描绘更好画面的 JS Fiddle:jsfiddle.net/kMGQC/16