CSS元素的定位position
属性position
|
值 |
描述 |
|
absolute
|
生成绝对定位的元素，相对于 static
定位以外的第一个父元素进行定位。（父元素指的是前一个以absolute或relative宣告其位置的元素，若之前都没有此定位的元素存在，则以元素所在的窗口最大可视范围边界为基点。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
fixed |
生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
relative |
生成相对定位的元素，相对于其正常位置进行定位，即按照元素的原始位置对该元素进行移动。(在正常文档流中偏移) 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
|
static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
|
inherit |
规定应该从父元素继承 position 属性的值。 |
下面再具体区别一下
|
|
相对定位 relative |
绝对定位 absolute |
|
定位基准 |
以它自己原来的位置为基准 |
以距离它最近的设置了定位属性的父级元素为定位基准，若它所有的父元素都没设置定位属性，则以浏览器窗口为定位基准 |
|
原来的位置 |
还占用着原来的位置，未脱离标准流 |
不占用其原来的位置，已经脱离标准流，其它元素就当它不存在一样。所以他会和他所在位置一样的元素重叠。 |
绝对定位的应用：
绝对定位的特点是脱离了标准流，所以不占据网页中的位置，而是浮在网页上，利用这个特点，绝对定位可以制作漂浮广告，弹出菜单等浮动在网页上的元素。如果 希望绝对定位元素以它的父元素为定位基准，则需要对它的父元素设置定位属性（一般是设置为相对定位），使它的父元素成为包含框，这就是绝对定位和相对定位 的配合使用。这样就可以制作出缺角的导航条、小提示窗口或下拉菜单了
固定定位作用：
可以做随窗口移动的广告和网页皮肤。
总结
css中元素的定位什么时候需要性对定位，什么时候用固定？什么时候需要绝对定位？还有浮动？
默认定位(即不加任何定位),通过margin,padding就能满足大部分要求；
当要使元素进行奇怪的偏移时,就用相对；
当要使元素独立于页面进行定位时,就用绝对；
当要使块级元素同行显示时,就用浮动 ；
当元素相对于窗口不变就用固定；
有的情况下结合使用如relative和absolute。