首先,介绍一下案例背景,设置冻结前的效果和代码如下
.page-top {
width:100%;
height:46px;
background:rgba(1,47,99,0.95);
min-width:950;
display:block;
}
.ask-panels {
width:100%;
height:63px;
background:#fff;
overflow:hidden;
border-top:1px solid #373737;
}
代码和效果如图,我要冻结蓝色的导航栏,首先设置导航栏的定位
.page-top {
width:100%;
height:46px;
background:rgba(1,47,99,0.95);
min-width:950;
position:fixed; /* 设置position为fixed */
display:block;
}
.ask-panels {
width:100%;
height:63px;
background:#fff;
overflow:hidden;
border-top:1px solid #373737;
}
效果如下图
这个时候蓝色导航栏,确实是冻结了,但是呢,由于设置了Position:relative之后,该元素的原始位置会消失,所以影响到了后面的div元素。
这里有两种方法解决
1. 最简单的一种,在白色div之前添加一个div,设置它的高度和蓝色导航栏高度一致
.page-top-bottom {
height:46px;
width:100%;
}
2. 第二种方法
.ask-panels {
width:100%;
height:63px;
background:#fff;
overflow:hidden;
border-top:1px solid #373737;
margin-top:46px;
}但是这种方法会产生一个问题,如图,body下移了margin-top的距离,而白色div和body的间距没有发生变化
解决办法是
① 给父元素设置边框 body { 1px solid transparent}
副作用是,影响美观,白色透明部分清晰可见,处女座切忌这种方法
② 设置子元素 {float:left}
由于float会对后面的元素产生影响,所以需要加上
③ 设置父元素的内边距 body {padding:1px}
方法类似①,效果和1一样
综合来说方法一和方法二中的第二种为上