为什么给head设置定位为fixed后，会覆盖下一个div的内容呢？

<!DOCTYPE html>
<html>
<head>
    <title>2-3编程练习</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
        color: #fff;
        font-family: "微软雅黑";
    }
    a{
        text-decoration:none;
    }
    .head{
        width: 100%;
        height: 100px;
        margin: 0 auto;
        background-color: #000;
        position: fixed;
        top:0;
         
    }
    .logo{
 
        height: 100px;
        float: left;
    }
    .dh{
        float: right;
        height: 100px;
        margin: 0 auto;
        line-height: 100px;
    }
    .content{
        width: 100%;
        height: auto;
    }
    .content img{
        width: 100%;
    }
    .foot{
        width: 100%;
        height: 50px;
        background-color: #000;
        text-align: center;
        line-height: 50px;
        position: fixed;
        left: 0;
        bottom: 0;
    }
 
    </style>
</head>
<body>
    <div class="head">
        <div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"></a></div>
        <div class="dh">
            <a href="#"><span>课程</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#"><span>职业路径</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#"><span>实战</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#"><span>猿问</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#"><span>手记</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>
    <div class="content"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0eda50001e12416000480.jpg" alt="加载失败"></a></div>
    <div class="content"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0edb80001c9f216000480.jpg" alt="加载失败"></a></div>
    <div class="content"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0edc9000100d516000480.jpg" alt="加载失败"></a></div>
    <div class="foot">
        <a href="#"><span>网站首页</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#"><span>企业合作</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#"><span>人才招聘</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#"><span>联系我们</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#"><span>常见问题</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="#"><span>友情链接</span></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</body>
</html>

vickyas 2017-05-01

源自：CSS网页布局基础 2-8 经典的两列布局

收起

4回答

麦麦zzz 2017-05-08 08:27:39

head设置fixed后脱离文档流，下面的div不知道head存在，于是向上移动了head的高度，然后head就遮住了一部分；所以需要将下面的div设置一个margin-top值为head高度，把head的位置留出来。

可以这样说head只知道自己固定了脱离了文档流，div不知道head在哪，但是你知道，你需要把他们的位置都安排好，大概我是这样理解的

收起回答

棒棒糖勇士 #1

margin-top我设置了以后为什么head的div位置也发生了变化？

2017-05-10 13:33:37
麦麦zzz 回复棒棒糖勇士 #2

我把你的.content选择器中加了margin-top：100px;之后试了试，head中的div没有变，你是不是加错地方了

2017-05-11 11:11:58