有多个页面，有的有固定的头部(设置了postion:fixed的元素)，有的没有固定的头部，这时就有个问题，有固定头部的页面，头部会遮挡下面的内容，那怎么解决呢？
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>防止fixed元素遮挡其他元素的方法</title>
<style>
* {
margin: 0;
padding: 0;
} body {
height: 3333px;
} .fixedtop {
margin-top: 50px;
} .fixedtop header {
position: fixed;
left: 0;
top: 0;
height: 50px;
overflow: hidden;
width: 100%;
background: blue;
} .fixedbottom {
margin-bottom:50px;
} .fixedbottom footer {
position: fixed;
left: 0;
bottom: 0;
height: 50px;
overflow: hidden;
width: 100%;
background: blue;
} </style>
</head> <body>
<div class="fixedtop">
<header></header>
</div>
<h1>1</h1>
<p>222</p>
<pre>
33
test
</pre> <div class="fixedbottom">
<footer></footer>
</div>
</body> </html>
这样,头部下面的元素h1不用额外设置margin-top，而且由于header外层新增了div.fixedtop,从而实现h1不会被header遮挡了。