html - 为什么我的div元素重叠？

我查看了有关此问题的许多不同帖子，但没有找到解决该问题的任何方法。我遇到的问题是“投资组合”部分中的元素在“关于我”部分中重叠。我尝试将溢出：隐藏和溢出：自动属性应用于我的代码，似乎没有任何效果！如果您有任何建议，这是我在JSFiddle上的代码，我很高兴听到他们的建议！谢谢！

/* 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/

谢谢大家！

最佳答案

为＃about-me .left-panel删除height: 450px;。 div中的文本溢出了它。重叠的原因是您在position: absolute;中输入了我的相关内容。还为id工作区添加了display: inline-block;。

/* 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%;
  height: auto;
}

#about-me .left-panel {
  width: 60%;
  text-align: center;
  float: left;
}

#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: inline-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>