防止div重叠

Question

我的 div 在我正在制作的 html 页面上重叠时遇到了问题。也就是说，带有包装器的那个将 header 与其中的菜单 (openbt) 按钮重叠。

我试过对 body 部分中的 div 重新排序，但这似乎没有帮助。我还尝试在 .main 中使用 clear: both 并且 .wrapper 都没有改变任何东西。

function openNav() {
  document.getElementById("mySidenav").style.width = "260px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

*,
*: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;
  position: fixed;
}

.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;
}

.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;
  }
}

<div id="mySidenav" class="sidenav">
  <div class="header">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  </div>
  <a href="Index.html">Home</a>
</div>

<div class="header">
  <div class="openbt" onclick="openNav()">&#9776; Menu</div>
</div>

<div class="main">

  <div class="wrapper">
    <div class="form">
      <h2>Edit Account</h2>
      <form action="edit_account.php" method="post">
        E-Mail Address:<br />
        <input type="text" name="email" />
        <br />
        <input type="submit" class="button" value="Update Account" />
      </form>
      <br/><br/>
    </div>
  </div>

</div>

Answer 1

将此添加到您的 .form div

position: fixed;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;

您的 header 是绝对定位的，因此您的其他内容将像不存在一样流动。您可能应该为 header 和 display:block 使用 position:relative 而不是内联块。

执行此操作后，内容将在下方流动。然后你需要使用一点边距，这样元素就不会接触。

在这种情况下，由于您的 .form 看起来像模态，最好将其固定放置在视图的中间。上面的代码就是这样做的。

Answer 2

由于.header是position:absolute，.main是position:fixed，所以它们都从正常的document flow中移除并相互重叠

一个解决方案是让它们都为 position:static（默认值）或将它们设置为 position:relative，以便它们随文档一起流动。

.main {
  font-size: 20px;
}
.header {
  height: 46px;
  background-color: #004063;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #f1f1f1;
}

function openNav() {
  document.getElementById("mySidenav").style.width = "260px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

*,
*: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 {
  font-size: 20px;
}

.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 {
  height: 46px;
  background-color: #004063;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
  border-color: #f1f1f1;
}

.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;
  }
}

<div id="mySidenav" class="sidenav">
  <div class="header">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  </div>
  <a href="Index.html">Home</a>
</div>

<div class="header">
  <div class="openbt" onclick="openNav()">&#9776; Menu</div>
</div>

<div class="main">

  <div class="wrapper">
    <div class="form">
      <h2>Edit Account</h2>
      <form action="edit_account.php" method="post">
        E-Mail Address:<br />
        <input type="text" name="email" />
        <br />
        <input type="submit" class="button" value="Update Account" />
      </form>
      <br/><br/>
    </div>
  </div>

</div>

如果你必须像你一样放置它们，你可以将 .main 向下推 .header 的高度：

.main {
  top: 46px;
  ...
}

function openNav() {
  document.getElementById("mySidenav").style.width = "260px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

*,
*: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 {
  top: 46px;
  width: 100%;
  font-size: 20px;
  position: fixed;
}

.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;
}

.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;
  }
}

<div id="mySidenav" class="sidenav">
  <div class="header">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  </div>
  <a href="Index.html">Home</a>
</div>

<div class="header">
  <div class="openbt" onclick="openNav()">&#9776; Menu</div>
</div>

<div class="main">

  <div class="wrapper">
    <div class="form">
      <h2>Edit Account</h2>
      <form action="edit_account.php" method="post">
        E-Mail Address:<br />
        <input type="text" name="email" />
        <br />
        <input type="submit" class="button" value="Update Account" />
      </form>
      <br/><br/>
    </div>
  </div>

</div>

参考，参见position @ MDN

防止div重叠

prevent divs from overlapping

html

css

css-position