html让内容冻结,html 导航冻结效果

首先，介绍一下案例背景，设置冻结前的效果和代码如下

.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一样

综合来说方法一和方法二中的第二种为上