html - 防止div重叠

标签 html css css-position

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

我尝试过对正文部分中的 div 重新排序，但这似乎没有帮助。我还尝试在 .main 和 .wrapper 中使用 clear: Both 都没有改变任何内容。

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>

最佳答案

由于 .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

关于html - 防止div重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50477990/

上一篇：Java邮件 : inline image in email

下一篇：html - CSS 网格不适用于 IE 或 Edge

相关文章：

javascript - 无法通过 JavaScript 设置 div.style.left 和 div.style.top css 属性

html - 内联 div 的行搞砸了

html - 如何在 div 悬停上悬停内容？

html - text-align 属性在此代码中无法正常工作

javascript - Grunt 在 Grunt + Sass 设置中创建 .tmp 文件夹

html - 如何通过将鼠标悬停在另一个 div 图像上来将 div 图像更改为另一个图像？

html - 修复第一个和最后一个 div css

css - 在相对元素中嵌套绝对元素 Firefox

html - 当显示设置为无时，Twitter 小部件将不会填充

c# - 我如何点击网站按钮？

©2024 IT工具网  联系我们