Html 为什么我的div堆叠在一起？

我在一个移动网站上工作，我对div的堆叠有一个问题。见截图

您将看到“关于内容”框是不透明的，它覆盖了徽标和主按钮。这是我的header div，但不幸的是，它被content div隐藏了。我是CSS新手，还不太了解它。我希望内容部分与标题部分保持适当的间隔，请参见上面的实际移动站点链接

下面是HTML/CSS

标题

正文/内容部分

---

提供一些代码或标记，这样我们就不必费神去帮助您了。根据新提供的内容代码重新打开。Quote OP:您将看到“关于”内容框是不透明的。它不是不透明的，它是透明的。。。或者更准确地说，介于两者之间-对不起，伙计们！希望这篇文章现在更加连贯。如果还缺少任何内容，请告诉我。@giwook基本上发生的是，您有一个bottom:0，它会将内容捕捉到页面底部。当你缩小页面时，页面底部会更靠近页眉，此时内容将继续向上覆盖页眉。好的，经过进一步的修补，我发现绝对定位是罪魁祸首。作为将来的参考，您如何保持绝对位置并使其后面的div标记不与原始div重叠？@giwook在您的情况下，您需要使用JavaScript，以避免容器通过头部底部。如果您主要关心的是内容呈现在导航顶部的事实，那么您只需绝对定位导航，然后增加z索引，使其呈现在顶部，主体落在其后面。

<div id="header">
    <div id="logo">
        <a href="index.html"><img src="img/logo.png"></a>
    </div><!-- #logo -->

    <div id="home">
        <a href="index.html"><img src="img/home.png"></a>
    </div><!-- #home -->
</div><!-- #header -->    


#header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 75px;
    background: #444;
    z-index: 99;
    padding: 0;
    margin: 0;
    display: inline;
    float: left;
}
#logo {
    padding: 15px 0 0 15px;
    float: left;
}
#home {
    padding: 25px 15px 0 0;
    float: right;
}

<div id="body">
    <div id="content_container">
        <div id="content">
                <h1>about</h1>
                <p>Our goal is to capture your event in the truest way possible, understanding the event, understanding how you want to present the event and then executing the event with the utmost efficiency and effectiveness.</p>
                <p>Our goal is to capture your event in the truest way possible, understanding the event, understanding how you want to present the event and then executing the event with the utmost efficiency and effectiveness.</p>
                <p><a href="contact.html">Contact us</a> today to find out how we can make your next event a success!</p>
        </div><!-- end of #content -->
    </div><!-- end of #content_container -->

    <a href="about.html"><div class="nav"><div class="navText">About</div></div></a>
    <a href="photos.html"><div class="nav"><div class="navText">Photos</div></div></a>
    <a href="contact.html"><div class="nav"><div class="navText">Contact</div></div></a>
    <div id="version">
        <p>Switch Version <br />Mobile | <a href="http://www.studiosimplicit.com/?force-web">Desktop</a></p>
    </div><!-- #version --> 
    <div id="copyright">
        <p>&copy; 2012 Studio Simplicit. All Rights Reserved.</p>
    </div><!-- end of #copyright -->
</div><!-- #body --> 


    #body {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    float: left;
}

    #content_container {
    background: url('../img/content_panel.png') repeat;
    position: relative;
    display: block;
    width: 100%;
    z-index: 99;
    margin: 0 auto;
    float: left;
}

    #content {
    padding: 15px;
}

    #version {
    color: #ddd;
    font-size: 12px;
    text-align: center;
}

    #version a {
        color: #fff;
        text-decoration: underline;
    }

    #version a:hover {
        color: #888;
        text-decoration: none;
    }

    .nav {
    width: 100%;
    height: 35px;
    margin: 0 0 1px 0;
    background: #333;
    opacity: .5;
    z-index: 9;
    float: left;
}

    .navText {
    font-family: Avenir, Arial, Helvetica, sans-serif;
    color: #fff;
    letter-spacing: .1em;
    text-align: center;
    padding-top: 8px;
    z-index: 99;
}