为什么我的div元素重叠？

Question

我已经查看了有关此问题的几个不同帖子，我找不到任何解决方案。我遇到的问题是我的＆＃34;投资组合中的元素＆＃34;部分重叠在＆＃34;关于我＆＃34;部分。我尝试过将overflow：hidden和overflow：auto属性应用到我的代码中，似乎没有任何工作！这是我在JSFiddle的代码，如果你们有任何建议我会很高兴听到他们！谢谢！

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

的jsfiddle： https://jsfiddle.net/pv5s6s0w/

谢谢大家！

Answer 1

为＃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>