解决HTML页面Div重叠问题：Wrapper与含openbt按钮的Header重叠

Hey there! Let's troubleshoot that overlapping issue between your .wrapper and header. The root problem here isn't about div order or clearing floats—your positioning setup is causing elements to break out of the normal document flow, which is why clear: both didn't help (that only works for floated elements, not positioned ones).

What's Causing the Overlap? #

Your .header uses position: absolute, which takes it out of the normal page flow. Then your .main has position: fixed, which also yanks it out of the flow and pins it directly to the top of the viewport. Since both elements aren't respecting each other's space in the document flow, the main content ends up sitting under the header.

Step-by-Step Fix #

Here's how to resolve this without messing up your sidenav functionality:

1. Remove position: fixed from .main: You don't need it here, and it's forcing content to start at the very top of the screen.
2. Add padding-top to .main: Match the value to your header's height (46px) to push the main content down far enough to avoid the header.
3. Add z-index to .header: Optional but ensures the header stays above the main content if any elements try to stack on top.

Updated Code Snippets #

Here's the modified CSS (key changes are commented):

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  font-family: "Lato", sans-serif;
  margin: 0;
  padding: 0;
  background-image: linear-gradient(#EFEFEF, #505050);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.sidenav { /*Main sidnav*/
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #000A0F;
  overflow-x: hidden;
  transition: .5s;
  padding-top: 46px;
}
.sidenav a { /*sidenav buttons*/
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #f1f1f1;
  display: block;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}
.sidenav a:hover { /*sidnav button hover*/
  color: #818181;
}
.main {
  width: 100%;
  font-size: 20px;
  /* Removed position: fixed; */
  padding-top: 46px; /* Push content down past the header */
}
.active {
  background-color: #000A0F;
  color: white;
}
.sidenav .closebtn {
  color: #f1f1f1;
  position: absolute;
  text-align: center;
  width: 60px;
  top: 0;
  right: 0px;
  font-size: 30px;
  padding: 6px 0px 6px 0px;
}
.header {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 46px;
  display: inline-block;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #004063;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #f1f1f1;
  z-index: 2; /* Ensure header stays above main content */
}
.openbt {
  float: left;
  width: 160px;
  right: 0;
  display: block;
  font-size: 30px;
  cursor: pointer;
  background-color: #004063;
  padding: 3px 0px 2px 20px;
  color: #f1f1f1;
  border-style: solid;
  border-width: 0px 1px 0px 0px;
  border-color: #f1f1f1;
}
.openbt:hover { /*sidnav button hover*/
  color: #818181;
}
.wrapper {
  text-align: center;
}
.form {
  font-size: 18px;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: white;
  width: 50%;
  min-width: 220px;
  box-shadow: 10px 10px 7px rgba(100, 100, 100, 0.7);
  border-radius: 10px;
}
.button {
  box-shadow: 5px 5px 7px rgba(100, 100, 100, 0.7);
  color: #000000;
  display: inline-block;
  font-size: 25px;
  padding: 0px 10px 0px 10px;
  background-color: white;
}
.button:hover {
  background-color: #CCCCCC;
}
@media screen and (max-height: 450px) {
  .sidenav { padding-top: 15px; }
  .sidenav a { font-size: 18px; }
}

Your HTML can stay exactly as it is—no need to reorder divs. Just swap in the updated CSS, and your .wrapper content will sit neatly below the header without overlapping.

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