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

Question

我查看了几个关于我遇到的这个问题的不同帖子，但没有找到解决我的问题的方法。我遇到的问题是我的“投资组合”部分中的元素与“关于我”部分重叠。我已经尝试将 overflow: hidden 和 overflow: auto 属性应用于我的代码，但似乎没有任何效果!这是我在 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/

谢谢大家!

Answer 1

为#about-me .left-panel 删除了 height: 450px;。 div 中的文本溢出了。它重叠的原因是您为关于我部分提供了 position: absolute;。还为 id work-section 添加了 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>