Html 当我给它一个负的保证金时，为什么我的div在另一个元素下

因此，我有一个div

（.section page layout）

，边距为

（边距顶部：-200px）

，div

（.section page layout）

位于div

（.section page header）

下面，它应该在上面。我把代码上传到一个演示链接，在那里你可以用Firebug或者其他什么东西来验证它。我还包括了我的代码

提前谢谢

CSS代码

/* Header */
.section-page-header {
    background: url("../img/frontcover.jpg") no-repeat;
    background-size: cover;
    width: auto;
    height: auto;
    min-height: 727px;
    min-width: 1280px;
}
.section-page-header-title_container {
    width: 1280px;
    position: relative;
    margin: 0 auto;
}
.section-page-header-title {
    margin-top: 83px;
    border-top: 7px #5b461c solid;
    width: 1170px;
    float: left;
    height: 167px;
    background: #000000;
    -webkit-border-radius: 0px 0px 50px 0px;
    border-radius: 0px 0px 50px 0px;
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    /* IE 5-7 */
    filter: alpha(opacity=90);
    /* Gecko */
    -moz-opacity: 0.9;
    /* Safari 1.x */
    -khtml-opacity: 0.9;
    /* CSS3 */
    opacity: 0.9;
}
.section-page-header-title h1 {
    font-family: 'QuicksandBook';
    margin-left: 147px;
    margin-top: 46px;
    font-size: 50px;
    color: #FFFFFF;
    text-transform: uppercase;
}
.section-page-header-title p {
    margin-top: 12px;
    margin-left: 147px;
    font-family: 'junctionregularRegular';
    color: #ff9900;
    text-transform: uppercase;
}
.section-page-layout-container {
    background:#984B09;
    background: url('../img/section-page-oj_gradient-background.png') repeat-y;
    background-size:contain;
    width: 100%;
    overflow: hidden;
}
.section-page-layout {
    width: 1280px;
    position: relative;
    margin: 0 auto;
    height: auto;
    overflow: visible;
    margin-top:-200px;
}
.left-section-container {
    width: 585px;
    height: 500px;
    background: #FFFFFF;
    float: left;
}

HTML代码

<!-- ===============
=== Section Page Template
=============== -->
<header class="section-page-header">
    <div class="section-page-header-title_container">
        <div class="section-page-header-title">
            <h1>ABOUT <b>US</b></h1>
            <p>A simple glance into our company</p>
        </div>
    </div>
</header>
<section class="section-page-layout-container">
    <div class="section-page-layout">
        <div class="left-section-container">
            <header> </header>
            <div class="left-section">
            </div>
        </div>
        <div class="right-module-section">

        </div>
    </div>
</section>
<div class="clear"><!-- Clear --></div>

关于我们
对我们公司的简单一瞥

如果父元素上有

溢出：隐藏

，则当您将子元素移出父元素时，它将被隐藏。

尝试将

z-index:100

添加到topNo上您想要的未修复itah的div上，容器上有

overflow:hidden

，因此当div向上移动时，它会隐藏在容器的边缘下，但是梯度分散器呢？@JakeZeitz他说的是黄色背景图像。这是一个1px高，2700px宽的图像。但是梯度分散器？添加

显示：内联块

到

。部分页面布局容器

，修复了背景问题，但在元素底部与页脚之间添加了这个奇怪的黑色空格？@kmgilbert100由于某种原因，您在

正文

上设置了

行高

。它应该是零。删除它会导致更多的间距