0
我看了一些關於這個問題的不同職位，我有，並沒有找到任何解決我的問題。我遇到的問題是我的「投資組合」部分中的元素在「關於我」部分中重疊。我試過應用溢出：隱藏和溢出：自動屬性到我的代碼，似乎沒有任何工作！這是我在JSFiddle上的代碼，如果你有任何的建議，我會很高興聽到他們！謝謝！爲什麼我的div元素重疊？
/* Mobile Navigation */
#mobile-nav {
display: none;
height: 75px;
background-color: #262626;
}
#mobile-nav .mobile-nav-tgl-btn {
height: 50px;
width: 50px;
background-color: transparent;
border: none;
margin-left: 15px;
margin-top: 12.5px;
cursor: pointer;
}
#mobile-nav .mobile-nav-tgl-btn .bar {
height: 7.5px;
width: 45px;
background-color: white;
margin-top: 6.25px;
margin-bottom: 6.25px;
margin-left: -5px;
}
#mobile-nav .nav-links {
text-align: center;
}
#mobile-nav .nav-links ul {
padding-left: 0;
margin-top: 4;
}
#mobile-nav .nav-links ul li {
list-style-type: none;
border: 2px solid black;
}
#mobile-nav .nav-links ul li a {
text-decoration: none;
color: black;
font-size: 1.6em;
}
/* Nomral Navigation */
#norm-navbar {
height: 75px;
background-color: #262626;
}
#norm-navbar .norm-nav-links {
padding-top: 16.5px;
float: left;
}
#norm-navbar .norm-social-links {
padding-top: 16.5px;
float: right;
}
#norm-navbar a {
font-size: 1.85em;
/* 29.6px font-size */
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: white;
}
/* Site header */
#header-section {
height: auto;
background-color: orange;
padding: 0;
margin: 0;
width: 100%;
}
#header-section .header-elements {
width: 75%;
margin: 0 auto;
text-align: center;
padding-top: 100px;
padding-bottom: 120px;
}
#header-section .header-elements img {
height: 150px;
width: 150px;
padding-bottom: 30px;
}
#header-section .header-elements h1 {
font-size: 3em;
}
#header-section .page-down-btn {
width: 20%;
margin: 0 auto;
text-align: center;
padding-bottom: 10px;
}
#header-section .page-down-btn p {
margin-top: 0;
margin-bottom: 5px;
}
#header-section .page-down-btn i {
font-size: 1.5em;
}
#header-section .page-down-btn a {
text-decoration: none;
color: black;
}
/* About me section */
#about-me {
width: 100%;
position: absolute;
height: auto;
}
#about-me .left-panel {
width: 60%;
text-align: center;
float: left;
height: 450px;
}
#about-me .left-panel h2 {
font-size: 2.5em;
margin-top: 10px;
margin-bottom: 15px;
}
#about-me .left-panel .about-me-para {
width: 75%;
margin: 0 auto;
}
#about-me .left-panel .about-me-para p {
margin: 0 auto;
text-align: left;
font-size: 1.5em;
}
#about-me .right-panel {
width: 40%;
float: right;
background-image: url("http://cdn.zmescience.com/wp-content/uploads/2014/07/over_the_edge.jpg");
height: 497px;
}
/* Portfolio/work section */
#work-section {
height: 500px;
width: 100%;
background-color: orange;
display: block;
}<div id="mobile-nav">
<button class="mobile-nav-tgl-btn">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
<div class="nav-links">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="norm-navbar">
<div class="norm-nav-links">
<a href="#">About</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</div>
<div class="norm-social-links">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-codepen" aria-hidden="true"></i></a>
</div>
</div>
<div id="header-section">
<div class="header-elements">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2000px-Google_%22G%22_Logo.svg.png" alt="Logo">
<h1>Hi, I'm a website developer that loves to make <strong>stunning</strong> and <strong>functional</strong> websites.</h1>
</div>
<div class="page-down-btn">
<p>Click to learn more</p>
<a href="#"><i class="fa fa-arrow-down" aria-hidden="true"></i></a>
</div>
</div>
<div id="about-me">
<div class="left-panel">
<div class="left-panel-cont">
<h2>Lorem ipsum</h2>
<div class="sm-sep"></div>
<div class="about-me-para">
<p class="para-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<br>
<p class="para-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="right-panel">
</div>
</div>
<div id="work-section">
<div class="box">
<h1>Hello!</h1>
</div>
<div class="box">
<h1>Hello!</h1>
</div>
<div class="box">
<h1>Hello!</h1>
</div>
</div>的jsfiddle： https://jsfiddle.net/pv5s6s0w/
謝謝大家！
請加浮動：左＃工作節課 –
試試這個https://jsfiddle.net/pv5s6s0w/1/ – Amal