那么，我们了解了fixed属性的说明后，就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候，如果你使用position的absolute属性来定位该层，你会发现absolute属性并不能达到你想要的css效果，。这时，就需要要用到fixed属性来定位该层了，当然，你如果不想用fixed属性的话，你是可以使用JavaScript语句来代替的。下面我们来实例演示一下:

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

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

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

前端（vue）入门到精通课程：进入学习Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

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

运行看下效果，如图2:

5.

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

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

以上就是CSS position属性中：fixed使用详解的详细内容，更多请关注php中文网其它相关文章！

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[email protected]核实处理。

程序员必备接口测试调试工具：点击使用

Apipost = Postman + Swagger + Mock + Jmeter

Api设计、调试、文档、自动化测试工具

可视化交互式的界面设计，仅需拖拉拽即可实现Web应用、小程序开发：立即使用

支持实时预览，前端UI原子级可视化开发，基于浏览器的IDE

基于自研的设计画布，实现像素级的设计稿还原