网站两大核心区块重叠问题求助（附完整代码及站点地址）

Hey, great job building your first site—let’s get that overlapping issue sorted out. Your suspicion about layout structure problems is spot-on, and the root cause is how you’re using absolute positioning for your #wrapper section.

What’s Causing the Overlap? #

When you set position: absolute on #wrapper, you’re taking it out of the normal document flow. That means the browser treats it like it’s floating above the page, and the following #team section doesn’t “see” the #wrapper at all. So #team starts rendering right at the top of the page, directly under the floating #wrapper—hence the overlap.

The Fix #

We’ll adjust the #wrapper positioning to keep it in the document flow, so the rest of the page respects its space. Here’s what to change:

Updated CSS for #wrapper #

#wrapper {
  position: relative; /* Replace absolute with relative */
  /* Remove top: 50%, left: 50%, and transform—those are only for centering absolute elements */
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center; /* Optional: Adds vertical centering for your content */
}

Bonus Tweaks to Polish Things Up #

• The #team h2 in your media query has margin-top: 85vh—since #wrapper now takes up proper space in the flow, you can change this to a fixed value like margin-top: 3rem for cleaner spacing on mobile.
• Double-check the layerright border triangle on small screens—you might want to adjust the border sizes if it’s causing unexpected layout shifts.

Full Modified CSS (Key Changes Highlighted) #

body { margin: 0; padding: 0; background: white; }
.header { position: relative; z-index: 100; margin: 3rem 3rem 3rem 19%; }
.header img { height: 65px; width: auto; opacity: 1; }
/* Updated #wrapper */
#wrapper { 
  position: relative; 
  height: 100vh; 
  width: 100%; 
  display: flex;
  align-items: center; /* Optional vertical centering */
}
#team { position: relative; width: 100%; min-height: 100vh; display: flex; }
.layerleft { position: relative; width: 48%; height: 100vh; background: white; box-sizing: border-box; }
.layerright { width: 52%; height: 100vh; box-sizing: border-box; border-left: 420px solid white; border-top: 100vh solid transparent; }
.content { margin: 40% -5% 2rem 40%; font-family: Libre Baskerville; font-size: 20px; opacity: 0.8; font-weight: 100; z-index: 1; }
.media { margin: 1rem -3rem 2rem 40%; font-size: 27px; cursor: pointer; opacity: 0.7; }
.media p ion-icon:hover { opacity: 1; color: #1c3c64; }
#team h2 { font-family: Libre Baskerville; margin: 1rem 10rem 2rem 10%; font-size: 45px; font-weight: 100; line-height: 1.8; }
#team hr { margin: 1rem 73% 2rem 10%; color: #1c3c64; background-color: #1c3c64; height: 1px; }
.teamdesc { margin: 4% 5rem 2rem 12%; font-family: Libre Baskerville; font-size: 30px; opacity: 0.8; font-weight: 100; }
footer { position: relative; margin: 7rem 2rem 2rem 2rem; opacity: 1; display: flex; justify-content: center; align-items: center; }
.footer-desc p { font-family: Libre Baskerville; font-size: 18px; opacity: 0.8; font-weight: 100; display: inline-block; }
.footer-logo { margin: 0 4% 0 0; height: 45px; display: inline-block; }
.fullscreen-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -100; height: 100%; }
.fullscreen-bg__video { position: absolute; right: 0; top: 0; width: auto; height: 100%; }
@media screen and (max-width: 767px) { 
  .content { margin: 110vh -90% 2rem 25%; } 
  .media { margin: 1rem -3rem 2rem 25%; } 
  .header { margin: 10rem 3rem 1rem 9.5%; } 
  .layerright { border-left: 100px solid white; border-top: 100vh solid transparent; } 
  #team h2 { margin: 3rem 10rem 1rem 12.5%; /* Adjusted margin-top */ } 
  #team hr { margin: 1rem 45% 2rem 12.5%; } 
  .teamdesc { margin: 12% 5rem 2rem 14%; font-size: 25px; } 
  .footer-desc p { font-size: 15px; } 
  .footer-logo { height: 35px; } 
}

After making these changes, #wrapper will properly take up the full viewport height in the document flow, and #team will render directly below it without overlapping.

内容的提问来源于stack exchange，提问作者clpelema