如何使用CSS来固定模块位置

海外服务器 (618) 2015-11-04 14:04:03

CSS定位的定义:

在CSS中关于定位的内容是:position:relative|absolute|static|fixed

static没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

relative不脱离文档流,参考自身静态位置通过top,bottom,left,right定位,并且可以通过z-index进行层次分级。

absolute脱离文档流,通过top,bottom,left,right定位。选取其最近的父级定位元素,当父级position为static时,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。

fixed固定定位,这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
CSS中定位的层叠分级:

z-index:auto|namber;

auto遵从其父对象的定位

namber无单位的整数值。可为负数

CSS position固定定位

由于广告的滥用,使得一些浏览器软件都开始有了广告内容拦截,使得一些很好的效果现在都不推荐使用了。比如让一个元素可能随着网页的滚动而不断改变自己的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed;他的含义就是:CSS position固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。

THE END