Question

我尝试创建单页网站，并在处理第二个＆＃34;页面＆＃34;时，例如我希望在主页div下面的另一个div，它超过第一个div而位于顶部。我试过漂浮和清理，也许我错过了一些明显的东西。我只需要将我的div堆叠在彼此之上，而不是重叠。

这是基本的HTML，

 <div id="lefthead">
    <a href="#">
    <img src="Images/logo.png" alt="logo" width="198" height="106">
    </a>
        <div id="nav">

            <ul>
                <li><a href="#">RECIPES</a></li>
                <li><a href="#">PRODUCTS</a></li>
                <li><a href="#">CONTACT</a></li>

            </ul>

        </div>
  </div>

  <div id="righthead">
    <a href="#">
    <img src="Images/fb_up.png" alt="fb_up" width="33" height="33"
   onmouseover="this.src='Images/fb_over.png';"
   onmouseout="this.src='Images/fb_up.png';">
   </img>
    </a>

  </div>

</div>  





<div id="slideone">
   <img src="Images/home1.jpg" alt="home1">


</div>


<div id="homecontent">
</div

和CSS

#header {
width:100%;
height: 132px;
background-color: white;
top:0; right:0; left: 0; 
position:fixed;
z-index:1;

}

#lefthead {
width:80%;
height: 132px;
float: left;
background-color:white;

}

#righthead {
width:20%;
height: 132px;
float: left;
background-color:white;

}


#righthead img{
position:relative;
top: 50%;
transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

#slideone {
position:absolute;
top: 0; right: 0; bottom: 0; left: 0;
width:100%;
height:775px;
background-color:red;
display:block;
float:left;
}


#slideone img {
width:100%;
overflow:hidden;
}



.shadow {
-moz-box-shadow: 0 0 30px 5px #999;
-webkit-box-shadow: 0 0 30px 5px #999;
}


#lefthead img {

display:inline-block;
position:relative;
top: 50%;
transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

#nav {

padding-bottom:35px;
display: inline-block;
}

li {
float: left;
display:block;



}


ul {
list-style-type: none;
}





a {

margin-left:25px;
width: 100px;
font-family: 'Raleway', sans-serif;
font-weight: 700;
text-decoration: none;
}

/* unvisited link */
 a:link {
color: #262626;


}

/* visited link */
a:visited {
color: #262626;

}

/* mouse over link */
a:hover {
color: #e37b01;

}

/* selected link */
a:active {
color: #e37b01;

}


#homecontent {
background-color:white;
height:200px;
position:absolute;
display:block;
clear:both;

}

Answer 1

尝试在CSS（所有div）中使用clear: both来阻止div重叠。

如果这不起作用，请参阅this链接。

Answer 2

你的html中似乎有一个额外的结束div。它位于“slideone”div之上。

我的div重叠了吗？

2 个答案: