在css中如何设置固定定位

首先我们在页面中创建一个div，给这个div设置宽度和边框，并在页面中居中。在这个div中添加很多文本信息，在打开页面的时候有滑动效果便可。接下来再创建一个div用于固定定位的图片。

我们给第二个div设置class的值为news，使用类选择器为该div设置宽和高，将上文截图的图片作为背景图片，在页面中打开的效果如下图所示。

接下来我们使用position: fixed;将图片这个div设置成固定定位，将top和left分别设置为0px，使这个图片固定在浏览器左上角的位置不动，效果如下图所示。

需要说明的是：固定定位的元素在页面上不会占据位置，也就是说它脱离了标准流，因此无论我们怎么缩小浏览器的页面，该图片的位置始终保持不动。

我们经常看到页面的广告都是成对出现的，像对联一样。因此我们在页面中再添加一个div，设置class为new2，其他设置均相同，仅把定位以后距离浏览器左边框的距离改为距离浏览器右边框的距离（将left:0px;改成right:0px;）。最后在浏览器中打开页面，便可以看到下图的效果了。

不管页面有多大，固定定位设置的top、left、buttom、right永远是相对于浏览器边框的。

固定定位的元素在页面上不会占据位置，即脱离了标准流。