我的div是否重疊？

Question

我正在嘗試創建一個單頁網站，並在處理第二個“頁面”時（例如，我要轉到主頁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重疊。

如果那不起作用，請參閱此鏈接。

Answer 2

您的html中似乎有一個額外的結束div。 它位於“ slideone” div的上方。