Возможно, это простая проблема, но в настоящее время я пытаюсь создать персональный веб-сайт с баннером / заголовком с меню, которое отлично работает, и панелью нижнего колонтитула. Оба используют div с «основным» div между ними для основного содержимого. По какой-то причине панель нижнего колонтитула появляется поверх панели меню/заголовка, закрывая ее, когда я пытаюсь поместить ее ниже основного раздела и чтобы она оставалась внизу страницы.
@font-face {
font-family: "cicle-gordita";
src: url("fonts/Cicle_Gordita.ttf") format("truetype");
src: url("fonts/Cicle_Gordita.eot") format("opentype");
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
background-color: #FFFFFF;
}
#banner {
height: 50px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
position: fixed;
background-color: #000000;
/*background-image: url("images/menuHor.png");*/
}
.menuBit {
height: 40px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 10px;
}
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
}
.menuContent {
font-family: "cicle-gordita";
font-size: 30px;
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #ffffff;
}
.main {
position: fixed;
margin: 0px;
margin-top: 50px;
padding: 0px;
width: 100%;
height: 90%;
background: #ff0000;
overflow: hidden;
}
#footer {
width: 100%;
background: #000000;
height: 50px;
position: fixed;
clear: both;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Personal - Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div id="banner">
<div class="menu">
<div class="menuBit">
<h2 class="menuContent">HOME</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">BLOG</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">WORK</h2>
</div>
</div>
</div>
<div class='main'>
<!-- Content Here -->
</div>
<div id="footer"></div>
</body>
</html>Как показано в заголовке, у меня есть файл jscript/jquery, но все, что он содержит, — это небольшой фрагмент кода, который исчезает при загрузке страницы, он ничего не меняет.
