Html 添加一个DIV会创建许多空白

我有以下HTML/CSS代码：

HTML

<div id = "content-wrapper">
<div class="stickyheader"> 
       <a href="index.php"><div id="logo"></div></a>    
       <div class="nav">
            <ul class="top_nav">
               <li>Home</li>
               ...
            </ul>
        </div>
</div>
<div id="content-wrapper">
    <div class="central_img_front">Some text</div>
    <div class="welcome_container">Test</div>
</div>

...
</div>

完整的JSFIDLE代码如下：

我的问题是

内容包装器
部分。此
div
内有两个
div
：

div.central_img_front
div.welcome_container

我需要这些div正好位于
div.stickyheader
下。现在，正如您在fiddle中看到的，
div.central\u img\u front
被推到了底部太远（在
div.stickyheader
下有很多空白）。如果我从HTML中删除
div.welcome\u容器，那么一切都正常。所以

我真的无法理解-为什么
div.welcome\u container
会影响
div.central\u img\u front

编辑：

div.central_img_front

位于绝对位置，因为它位于容器（包装器）中。如果删除position:absolute，则它的位置不正确。
空白是由
.welcome container
造成的，它有一个巨大的
边距顶部


变化是：

.welcome_container {
    margin: 0px auto 55px auto; 
    // was margin: 413px auto 55px auto;
    text-align: center;
    width: 760px;
}

嗨，伙计们，检查一下这些小提琴

问题在于
边距
和
高度
位置：绝对将div.central\u img\u前端置于线外，div.welcome\u容器滑入其前面。你能把它取下来吗？
是不是因为你的收割台太高了？尝试将div.stickyheader.height设置为50px，将div.content-wrapper.margin-top设置为50px删除/减少.welcome容器的顶部边距（413px）。。因此，这将减少菜单和图像之间的空白。如果我删除边距顶部，则div.welcomecontainer和其他内容位于中间位置的顶部。请参阅网站：div.central\u img\u front应位于空白处，但div.welcome\u容器应位于div.central\u img\u front的正下方，这就是设置页边空白顶部的原因。
。central\u img\u font
正在跳到
之前。welcome\u container
因为
位置：绝对，如果删除该选项，则-div将按正确顺序排列。如果删除绝对值，则图像的位置不正确（请参见此处）。这是因为它在包装里。我将更新我的问题。更改
左侧：-460px至
左边距：-460px.welcome_container {
    margin: 0px auto 55px auto; 
    // was margin: 413px auto 55px auto;
    text-align: center;
    width: 760px;
}