Question

所以我尝试了所有已经讨论并用于在每个站点上解决这个问题的东西（溢出：隐藏/溢出：自动/清除：两个/高度：自动;父亲是相对的;孩子是绝对的）我终于在创建stackoverflow帐户时给出。

我似乎无法将我的文本保留在父容器中。我发誓这只是我忘记的超小型东西。

这是一个JSFiddle ..

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

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

1 个答案: