Question

我设法溢出了一个父div，它是一个带有以下CSS的内容包装器，但是现在这个div隐藏了它背后的内容。我怎么能这样做？

我的HTML文件

<div class="contentwrapper">
  <div class="promotional_outer">
    <div class="promotional">
    ...
    </div>
  </div>
  <div class="footer">
  ... this footer is overflown by the promotional div ...
  </div>
</div>

我的CSS文件

.contentwrapper {
    width: 1150px;
    text-align: left;
    margin: 0px auto;
}
.promotional_outer{
    background-color: #8fcbe5;
    position:absolute;
    left: 0;
    width: 100%;
    overflow: auto;
    margin: 0px auto;
    clear: both;
}
.promotional {
    background-color: #30a3da;
    padding: 75px;
    color: #fff;
    width: 1000px;
    margin: 0px auto;
    clear: both;
}

This explains the issue

Answer 1

我目前正在处理的网站上有完全相同的问题。

原来唯一的解决办法就是这样做：

<div class="wrapper">
    <div class="header">
    ...
    </div>
</div>
<div class="promotion_outer">
    <div class="wrapper">
        <div class="promotion_inner">
        ...
        </div>
    </div>
</div>

Answer 2

我认为最好调整你的html来做这样的事情：

<div class="inner">
    <p>Content</p>
</div>

<div class="promo">
    <div class="promo--inner">
        <p>Content</p>
    </div>

    <div class="promo--callout">
        <p>Promo callout</p>
    </div>
</div>

<div class="inner  footer">
    <p>Footer content</p>
</div>

看看这个小提琴：http://jsfiddle.net/kFShb/2/

Answer 3

您可以使用z-index。

绕过元素的流程

.footer {
    position: relative;
    z-index: 10;
}

Fiddle

Answer 4

从position: absolute移除.promotional_outer。

绝对定位从正常文档流中删除元素。

Answer 5

只需删除CSS中的position: absolute;和left: 0;

即可

.promotional_outer{
    background-color: #8fcbe5;
    width: 100%;
    overflow: auto;
    margin: 0px auto;
    clear: both;
}

This should solve your problem

在嵌套CSS </div>中溢出Parent <div>

5 个答案: