防止div重叠

Question

我在我正在制作的html页面上重叠了我的div。即包装器与标题重叠，菜单（openbt）按钮重叠。

我已尝试重新排序正文中的div，但这似乎没有帮助。我还尝试使用clear: both进入.main而.wrapper没有改变任何内容。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

将此添加到.form div

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

您的标题位于绝对位置，因此您的其他内容将会流动，就好像它不存在一样。您可能应该使用position：relative作为标题并显示：block而不是inline block。

一旦你这样做，内容将在下面流动。然后你需要使用一点边距，这样元素就不会碰到。

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

Answer 2

由于.main为position:fixed且position:static为position:relative，因此它们都会从正常document flow中移除并相互重叠。

一种解决方案是让它们都为.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;
  }
}

＆＃13;

＆＃13;

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

＆＃13;

.main

＆＃13;

.header

＆＃13;

＆＃13;

＆＃13;

如果您必须按原样定位，可以将.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;
  }
}

＆＃13;

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

供参考，请参阅position @ MDN