固定位置标头重叠 [英] fixed position header overlapping
问题描述
好的，所以我有点两个问题.一种是每当我尝试做position:fixed;在.header上，它在标题的底部增加了空间，并使.main-content放在标题的后面，并在标题的顶部增加了边距.另一个问题是，每当我没有固定位置时，标题和主要内容之间就会有空间，并且由于某种原因，如果我在主要内容上加了边框，则空间就不会存在.我查看并查看了我的代码，试图找出问题所在，但似乎什么也找不到. 感谢您的帮助！
Okay so I kind of have two problems. One is whenever I try to do position:fixed; on the .header it adds space to the bottom of the header and it makes the .main-content go behind the header and also adds margin to the top of the header. The other problem is whenever I did not have the fixed position there was space between the header and the main content and for some reason it the space is not there if I put a border on the main content. I've looked and looked over my code trying to find whats wrong with it and I just can't seem to find anything. Thanks for any help!
/***********************************
LOGO
***********************************/
.header{
background-color: skyblue;
margin:0;
padding:0;
width: 100%;
}
.logo{
text-align: left;
display: block;
margin:0 15px 0px 15px;
}
#logo-large{
display: inline;
font-size: 3em;
font-weight: 200%;
font-family: 'Dosis' , sans-serif;
}
#logo-small{
display: inline;
font-weight:0;
font-size: 2.5em;
font-family: 'Dosis' ,sans-serif;
}
/************************************
NAVIGATION
************************************/
nav ul{
list-style-type:none;
/****display: block;
padding: 5px;
margin: 5px;
text-align: center;****/
}
nav{
display:inline;
float: right;
}
nav ul li{
display: inline-block;
padding: 5px 0px;
margin: 0;
}
nav ul li a{
text-decoration: none;
padding:20px 12px 12px 12px;
color:black;
font-family: 'Muli', sans-serif;
font-size: 1.25em;
}
nav ul li a:active, nav ul li a:hover{
background-color: deepskyblue;
color: white;
}
/*************************************
main content
*************************************/
.main-content{
background-color: grey;
font-family: 'Muli', sans-serif;
margin:0;
padding:10px;
border: 1px solid black;
}
body{
margin:0;
padding:0;
}
<!DOCTYPE html>
<html>
<head>
<title>FatHead | Blog</title>
<link href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1> <h1 id="logo-small">HEAD</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Categories</a></li>
</ul>
</nav>
</div>
</div>
<div class="main-content">
<h1>Welcome to my blog!</h1>
<p>This would be where all the content inside the blog post goes.</p>
</div>
</body>
</html>
推荐答案
现在只需添加到此CSS 中，定义您的.header position :fixed并定义您的body padding-top:65px;
Now just add to this css define your .header position :fixed and define your body padding-top:65px;
.header{
position: fixed;
left:0;
right:0;
top:0;
}
html body {
padding-top: 65px;
}
这篇关于固定位置标头重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
