2012-03-22 60 views
0

我正在一个移动网站上工作,并且遇到了div彼此堆叠的问题。看截图。为什么我的div堆叠在一起?

enter image description here

你会看到“约”内容框是不透明的,并且覆盖了标识和主页按钮。这是我的头div,但不幸的是它被内容div隐藏。我是一个CSS新手,并没有完全掌握它。我希望内容部分与标题部分(请参见实际的移动网站,上面的链接)有适当的间隔

这里是HTML/CSS。

<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; 
} 
+0

如何提供一些代码或标记,所以我们不必鱼来帮助你。 – Gabe 2012-03-22 23:43:56

+0

根据新提供的内容(代码)重新打开。 – Marty 2012-03-23 02:27:57

+0

**报价OP:** _“您会看到”about“内容框不透明”_“。这不是不透明的,它是透明的......或者更确切地说,在两者之间的某处。 ;-) – Sparky 2012-03-23 15:32:02

回答

-1

enter image description here

+0

对不起!希望这篇文章现在更加连贯。让我知道是否还有遗漏。 – giwook 2012-03-23 01:28:34

+0

@giwook基本上发生了什么是你有'底部:0'这将把内容捕捉到页面的底部。当您向下缩放页面时,页面底部会更靠近页眉,此时内容将继续向上以覆盖页眉。 – Marty 2012-03-23 01:30:14

+0

好的,经过一番修补之后,我发现绝对定位是罪魁祸首。为了将来的参考,你将如何保持绝对定位,并有div标签后,它不会重叠原始div? – giwook 2012-03-23 01:49:55