我正在一个移动网站上工作,并且遇到了div彼此堆叠的问题。看截图。为什么我的div堆叠在一起?
你会看到“约”内容框是不透明的,并且覆盖了标识和主页按钮。这是我的头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>© 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;
}
如何提供一些代码或标记,所以我们不必鱼来帮助你。 – Gabe 2012-03-22 23:43:56
根据新提供的内容(代码)重新打开。 – Marty 2012-03-23 02:27:57
**报价OP:** _“您会看到”about“内容框不透明”_“。这不是不透明的,它是透明的......或者更确切地说,在两者之间的某处。 ;-) – Sparky 2012-03-23 15:32:02