position:fixed固定定位的用法？固定定位（position: fixed）是相对于浏览器的窗口进行的定位，即使页面滚动，固定定位元素在视窗中的位置也不会发生变化。固定定位元素的位置通过left、top、right、bottom属性进行规定。
固定定位常用于网页导航、详情页中的置顶按钮等。如图1所示，黄线圈出的部分是一个置顶按钮，无论页面滚动到什么位置，置顶按钮始终位于页面右侧的中间位置。
图1 淘宝店铺页面中的置顶按钮
【例】仿照淘宝的置顶按钮，完成一个固定定位的案例。在页面上创建一个类名为page的盒子，设置其高度为2000px。在page中创建一个back按钮，效果如图2所示。代码如下。
<style>
.back img{
width:50px;
height:50px;
}
.page{
height:2000px;
}
</style>
<body>
<div class="page">
<div class="back">
<img src="img/back.png" alt="" />
</div>
</div>
</body>
图2 在page中创建一个back按钮
给div元素back设置绝对定位，CSS代码如下。
.back img{
width:50px;
height:50px;
}
.page{
height:2000px;
}
.back{
position:fixed;
right:20px;
top:300px;
}
拖动滚动条时，back按钮相对于浏览器窗口并不发生变化，浏览器显示效果如图3、图4所示。
图3 固定定位
图4 拖动滚动条
