为什么加入position: relative;会跟头部样式重叠

<style type="text/css">
 *{margin: 0;padding: 0;}
 body{min-width: 700px;}
 /*头部和底部共同样式*/
.header, .footer{
 float:left;
 width:100%;
 height: 100px;
 background: black;
 position: fixed; 
}
 
 /*主体部分样式*/
.container{
padding:0 220px 0 200px;
 
}
/*中间 左侧和右侧共同样式*/
  .middle, .left, .right{
  float:left;
  height:1000px;
  min-height: 130px;
  position: relative;
  }
  /*中间样式*/
.middle{width:100%;
       background:#FF9999;
    }
 /*左侧样式*/
.left{width:200px;
      background:#FFCC99;
      margin-left:-100%;
      left: -200px; }
  /*右侧样式*/
.right{width:220px;
       background:#add8e6;
       margin-left:-220px;
       right: -220px; 
  }
.footer{
 
 }
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
            <div class="img">
                <img src=""/>
            </div>
            <div class="">
                <h4>toubu</h4>
            </div>
</div>
<!--主体-->
<div class="container">
     <div class="middle">
          <h4>zhong</h4>
          <p>rewoirpoew</p>
     </div>
     <div class="left">
          <h4>大zuo</h4>
          <p>rewoirpoew</p>
     </div>
     <div class="right">
          <h4>you</h4>
     </div>
 
</div>
<!--底部-->     
<div class="footer">
          <div class="img4">
                <h4>di</h4>
          </div>
 </div>
</body>

qq_寄给你一朵玫瑰_0 2018-01-29

源自：CSS网页布局基础 3-3 编程练习

收起

3回答

小丸子爱吃菜 2018-01-31 13:48:01

给头部再设置一个z-index，值可以大一些。

收起回答

小丸子爱吃菜 2018-01-30 09:35:28

你要给头部设置top：0；给底部设置bottom：0；

这样头部和底部就能固定在各自的位置了。

收起回答

提问者 qq_寄给你一朵玫瑰_0 #1

.header{top:0; z-index: 9px;}.footer{bottom: 0px;}我分别给头部底部加上了，但是审查元素的时候，头部消失了，底部出现了是正常浏览效果，是不是跟圣杯布局哪个地方有不一致的地方

2018-01-31 12:45:58
提问者 qq_寄给你一朵玫瑰_0 #2

审查元素的时候是可以看到头部div的但是头部的样式是不显示的，主体的样式就会代替头部填充

2018-01-31 12:47:44

小丸子爱吃菜 2018-01-29 17:54:10

给谁加入position: relative;会跟头部重合？请描述清楚，这样我们也能尽快的定位到问题所在。

祝学习愉快！

收起回答

提问者 qq_寄给你一朵玫瑰_0 #1

.header, .footer{ float:left; width:100%; height: 100px; background: black; position: fixed; } 这段代码，我用浏览器查看以后，头部跟底部是在一起的

2018-01-29 19:31:54
二十二灬小哥回复提问者 qq_寄给你一朵玫瑰_0 #2

fixed定位是相对整个窗口进行定位，由于你没有对两个div各自设置偏移量，所以他们出现在同一个位置。使用这个这种定位模式需要对你的页头、页脚两个div单独设置定位偏移量。 /*页头*/ .header{position:fixed;top:0;} /*页脚*/ .footer{position:fixed;bottom:0;}

2018-02-05 16:41:04