[转载]CSS元素的定位position

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。