实例详解CSS中position的fixed属性使用

首先，我们应该先了解下fixed属性的说明：fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。

下面我们来实例演示一下:

方法/步骤

1.我们在代码中加入2个层：div1和div2，代码如下：

<div class="div1">层1</div>

<div class="div2">层2</div>

2.写对应的css代码，我们先不加fixed属性试试：

.div1{

background-color:#FF0000;

width:100px;

height:100px;

}

.div2{

background-color:#33FF66;

width:100px;

height:100px;

}

3.然后我们F12运行一下看看效果，我是用的dreamweaver 8，你也可以直接在记事本里面测试代码，图1是没加fixed属性的效果：

运行效果图1

4.下面我们把fixed属性加上去，为了让我们便于观察，我们让‍‍层div1的宽和高足够大‍‍，css代码如下：

.div1{

background-color:#FF0000;

width:2000px;

height:2000px;

}

.div2{

background-color:#33FF66;

width:100px;

height:100px;

position:fixed;

left:50px;

top:50px;

}

运行看下效果，如图2:

下面我们拉动浏览器上的上下滚动条和左右滚动条，就都拉到中间的位置吧，如图3：

你会发现，给div2的position加上fixed属性后，不论我们如何拉动浏览器的滚动条，层2在浏览器中的位置都是不会变化的，是不是感觉有跃跃欲试的感觉呢，那么就赶紧动手实验一下吧。

继续阅读：css  position  

原创文章请注明转载自杭州WEB前端外包网站本文地址：http://hz.35ui.cn/post/24.html，标题：实例详解CSS中position的fixed属性使用