关于css的问题(已解决)

bluezcheng

请问有哪位高手可以解释css里的 position: relative,absolute,和fixed这三者有什么差别？
先谢了!

[ 本帖最后由 bluezcheng 于 8-4-2007 12:47 AM 编辑 ]

star4u

原帖由 bluezcheng 于 6-4-2007 03:26 PM 发表
请问有哪位高手可以解释css里的 position: relative,absolute,和fixed这三者有什么差别？
先谢了!

我也很想知道。。
虽然在project有用到。。可是还是不清楚

bluezcheng

没有人可以解释一下吗？
目前我只试到absolute而已，这个可以控制网页里任何element的位置。

至于relative,和fixed我到现在都还搞不懂它们用来怎样控制的？另外还有一个叫做static的，更让我头痛 。。。
在w3schools找过相关资料，但看不是很明白，

Value                Description

static= Default. An element with position: static always has the position the normal flow of the page gives it (a static element ignores any top, bottom, left, or right declarations)

relative= An element with position: relative moves an element relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute= An element with position: absolute is positioned at the specified coordinates relative to its containing block. The element's position is specified with the "left", "top", "right", and "bottom" properties

fixed= An element with position: fixed is positioned at the specified coordinates relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties. The element remains at that position regardless of scrolling. Works in IE7 (strict mode)

也试过在try it yourself修改coding看看效果，也捉不到它们的分别以及到底是怎样用的？

希望这里的高手可以指点指点一下小弟，先谢谢了！

yeephuang

http://www.quirksmode.org/css/position.html

去看看，你就会了解

bluezcheng

非常谢谢你给的参考！
现在都了解relative和static的作用了。
只是。。。可能小弟真的智质有限，还是捉不到fixed的用法。。。

jesh

原帖由 bluezcheng 于 7-4-2007 11:32 PM 发表
非常谢谢你给的参考！
现在都了解relative和static的作用了。
只是。。。可能小弟真的智质有限，还是捉不到fixed的用法。。。

用fixed的话，那个element的位置永远显示相对于你browser的同一个位置上。
不管你任何scroll，它的位置都不会改变。

参考：http://www.snook.ca/archives/javascript/mootools_drag_a/

bluezcheng

谢谢你的解答，我终于知道fixed的用法了。
但是听说IE6不支持fixed的属性，我是从这里知道的http://tiger-passion.javaeye.com/blog/54914
因为我的web browser是IE6，不怪得我一直试不出他的效果啦！是这样吗?

另外你给的link参考好像没有关系到fixed哦！可能是我英文烂的关系吧，所以没有看到。
anyway，还是非常感谢你的答复还有各位的帮忙，谢谢大家！

jesh

原帖由 bluezcheng 于 8-4-2007 12:45 AM 发表
谢谢你的解答，我终于知道fixed的用法了。
但是听说IE6不支持fixed的属性，我是从这里知道的http://tiger-passion.javaeye.com/blog/54914
因为我的web browser是IE6，不怪得我一直试不出他的效果 ...

对不起，不是你的英文烂，而是我没注明清楚。
那个link的确没有关系到fixed，但有fixed的效果，
也就是右边那个post comments的东西，不管你如何上下scroll，它的位置都是fixed的。