Html 防止div重叠

我在制作html页面时遇到了div重叠的问题。也就是说，带有包装器的一个将标题与其中的菜单（

openbt

）按钮重叠

我试着重新排列身体部分的div，但似乎没有帮助。我还尝试在for

.main

和

.wrapper中使用
clear:


函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“260px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
*，
*：之前，
*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
html，
身体{
身高：100%；
字体系列：“Lato”，无衬线；
保证金：0；
填充：0；
背景图像：线性梯度（#efef，#505050）；
背景重复：无重复；
背景附件：固定；
}
.侧导航{
/*主导航*/
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
底部：0；
背景色：#000A0F；
溢出x：隐藏；
过渡：.5s；
填充顶部：46px；
}
.侧导航a{
/*侧导航按钮*/
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：20px；
颜色：#f1f1；
显示：块；
边界：无；
背景：无；
文本对齐：左对齐；
光标：指针；
过渡：0.3s；
}
.侧导航a:悬停{
/*导航按钮悬停*/
颜色：#818181；
}
梅因先生{
宽度：100%；
字体大小：20px；
位置：固定；
}
.主动{
背景色：#000A0F；
颜色：白色；
}
.sidenav.closebtn{
颜色：#f1f1；
位置：绝对位置；
文本对齐：居中；
宽度：60px；
排名：0；
右：0px；
字体大小：30px；
填充：6px 0px 6px 0px；
}
.标题{
位置：绝对位置；
排名：0；
左：0px；
宽度：100%；
高度：46px；
显示：内联块；
边际上限：0px；
边缘底部：0px；
背景色：#004063；
边框样式：实心；
边框宽度：0px 1px 0px 1px；
边框颜色：#f1f1；
}
.openbt{
浮动：左；
宽度：160px；
右：0；
显示：块；
字体大小：30px；
光标：指针；
背景色：#004063；
填充：3px0px 2px20px；
颜色：#f1f1；
边框样式：实心；
边框宽度：0px 1px 0px 0px；
边框颜色：#f1f1；
}
.openbt:悬停{
/*导航按钮悬停*/
颜色：#818181；
}
.包装纸{
文本对齐：居中；
}
.表格{
字号：18px；
显示：内联块；
边缘顶部：10px；
边缘底部：20px；
背景色：白色；
宽度：50%；
最小宽度：220px；
盒影：10px 10px 7px rgba（100100100,0.7）；
边界半径：10px；
}
.按钮{
盒影：5px5px7pxRGBA（1001001000.7）；
颜色：#000000；
显示：内联块；
字体大小：25px；
填充：0px 10px 0px 10px；
背景色：白色；
}
.按钮：悬停{
背景色：#中交；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.侧导航{
填充顶部：15px；
}
.侧导航a{
字号：18px；
}
}

☰ 菜单
编辑帐户
电子邮件地址：






将此添加到.form div

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

你的标题是绝对定位的，所以你的其他内容会像不存在一样流动。您可能应该使用position:relative作为标题和display:block，而不是inline块

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

在这种情况下，因为你的表单看起来像一个模态，所以把它固定在视图的中间是很好的。上面的代码就是这样做的。
因为
.header
是
位置：绝对的
和
。main
是
位置：固定的
，所以它们都从法线中移除并相互重叠

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


函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“260px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
}
*，
*：之前，
*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
html，
身体{
身高：100%；
字体系列：“Lato”，无衬线；
保证金：0；
填充：0；
背景图像：线性梯度（#efef，#505050）；
背景重复：无重复；
背景附件：固定；
}
.侧导航{
/*主导航*/
宽度：0；
位置：固定；
z指数：1；
排名：0；
左：0；
底部：0；
背景色：#000A0F；
溢出x：隐藏；
过渡：.5s；
填充顶部：46px；
}
.侧导航a{
/*侧导航按钮*/
填充：6px 8px 6px 16px；
文字装饰：无；
字体大小：20px；
颜色：#f1f1；
显示：块；
边界：无；
背景：无；
文本对齐：左对齐；
光标：指针；
过渡：0.3s；
}
.侧导航a:悬停{
/*导航按钮悬停*/
颜色：#818181；
}
梅因先生{
字体大小：20px；
}
.主动{
背景色：#000A0F；
颜色：白色；
}
.sidenav.closebtn{
颜色：#f1f1；
位置：绝对位置；
文本对齐：居中；
宽度：60px；
排名：0；
右：0px；
字体大小：30px；
填充：6px 0px 6px 0px；
}
.标题{
高度：46px；
背景色：#004063；
边框样式：实心；
边框宽度：0px 1px 0px 1px；
边框颜色：#f1f1；
}
.openbt{
浮动：左；
宽度：160px；
右：0；
显示：块；
字体大小：30px；
光标：指针；
背景色：#004063；
填充：3px0px 2px20px；
颜色：#f1f1；
边框样式：实心；
边框宽度：0px 1px 0px 0px；
边框颜色：#f1f1；
}
.openbt:悬停{
/*导航按钮悬停*/
颜色：#818181；
}
.包装纸{
文本对齐：居中；
}
.表格{
字号：18px；
显示：内联块；
边缘顶部：10px；
边缘底部：20px；
背景色：白色；
宽度：50%；
最小宽度：220px；
盒影：10px 10px 7px rgba（100100100,0.7）；