由于position:fixde脱离文档流 使其头部与兄弟元素重叠
header {
width: 100%;
height: 60px;
background-color: black;
position: fixed;
}
解决步骤:
1:给兄弟元素一个上外边距
article{
width: 100%;
background-color:cornflowerblue;
margin-top: 60px;
}
2:给页面头部一个 top:0;
因header固定定位 导致两兄弟元素重叠 则给兄弟元素上外边距会导致外边距合并 使其header被拖拽下来 因固定定位给了方向值元素才会以视口为起始位置开始移动 所以为让header从原来被拖拽的位置到紧挨页面顶部 则需要给header方向值 top:0;
header {
width: 100%;
height: 60px;
background-color: black;
position: fixed;
top: 0;
}