解决 HTML 中的重叠元素答案

【问题标题】：Resolve overlapping elements in HTML解决 HTML 中的重叠元素
【发布时间】：2019-04-20 00:41:08
【问题描述】：

我的 HTML 页面有页眉、导航栏、正文内容元素和页脚元素，但是页脚元素与 div 元素 bodycontent 重叠，而它应该位于 bodycontent 元素下方和页面底部。请提出任何改变定位的建议来解决这个问题。

.header {
    padding: 10px;
    width: 100%;

    text-align: center;
    background-color: #F2F2F2;
    color: #424242;
}
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
    clear: both;
    position: inherit;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 20px;
    background-color: #808080;
    color:#fff;
}
.prodheading {
    width: 100%;
    height: 20px;
    background-color: #808080;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

ul.nav_bar{
  position: absolute;
  height: 50px;
  top: 50%; left: 50%;
  margin-top: -25px; margin-left: -200px;
  padding: 0px;

 list-style: none;
  text-align: center;

}
.bodycontent{
    position:relative;
    top:45px;
    bottom:30px
    padding:15px;
}

我的主页 HTML 页面 -

<html>
<head>
<style><%@include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>My Webpage</title>
</head>
<body>
<%@ include file="header.jsp" %> 
<div class="bodycontent">
<h3>Our Mission</h3>
<p>Hello World !!!</p>
<h3></h3>
<p>Trying out webpage</p>
</div>
<%@ include file="footer.jsp" %>
</body>
</html>

标题 html 元素 -

<html>

<head>
<style><%@include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>
<h3>Title 1</h3>
<h5>Title 2</h5>

</center>


  <ul class="nav_bar">
    <li class="navit"><a class="link">Home</a></li>
    <li class="navit"><a class="link" >Items</a></li>
    <li class="navit"><a class="link" >About Us</a></li>
    <li class="navit"><a class="link" >Contact</a></li>

  </ul>
</body>
</html>

页脚html元素

<html>
<head>
<style><%@include file="/css/mystyle.css"%></style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<center>All rights reserved 2018</center>
</body>
</html>

【问题讨论】：

嘿dfvc！感谢您为 SO 做出贡献！您能否也为这个问题发布任何相关的 HTML？当我们看不到任何类型的“最终”产品时，很难对代码进行故障排除！非常感谢
@Ryan 嗨，我已经更新了 HTML 元素。

标签： html css

【解决方案1】：

你需要像这样添加 CSS 代码：

.header {
    display: inline-block;
    padding: 10px;
    width: 100%;
    text-align: center;
    background-color: #F2F2F2;
    color: #424242;
}
body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.footer {
    display: inline-block;
    width: 100%;;
    text-align: center;
    width: 100%;
    height: 20px;
    background-color: #808080;
    color:#fff;
}
.prodheading {
    display: inline-block;
    width: 100%;
    height: 20px;
    background-color: #808080;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

ul.nav_bar{
  position: absolute;
  height: 50px;
  top: 50%; left: 50%;
  margin-top: -25px; margin-left: -200px;
  padding: 0px;
  list-style: none;
  text-align: center;

}
.bodycontent{
    display: inline-block;
    width: 100%;
    padding:15px;
}

现在，您可以根据自己的要求在ul.nav_bar 中添加用于主菜单设计的 CSS。

【讨论】：