position4个属性：
static: 普通页面流布局。不受top, bottom, left, or right这些属性的影响
relative: 也是普通页面流布局(此话不够精确,因为relative的元素下接的普通元素也会占用relative的空间)。但是会因为top, bottom, left, or right这些定义而偏移。 这些象素的偏移通常不是我们使用relative的原因，我们定义成relative通常是为了把这个元素作为“containing block”,这个containing block中可以包含absolute的元素。
absolute: 具有此属性的元素会脱离页面流布局之外，而是按照定义的top, bottom, left, or right值在它最近的“containing block”中定位
具有流布局的元素也当absolute的元素不存在，占用absolute元素用过的空间
fixed： 也是脱离页面流布局的元素，但是它的定位是相对于浏览器窗口viewport，不管窗口滚动
IE6不支持fixed。 对relative的支持似乎跟ff也不是完全相同
--------------------------------------------------------
完全参考：http://www.quirksmode.org/css/position.html
The four values
position takes four values: static, relative, absolute, and fixed. static is the default value; for any other value you have to apply a CSS declaration.
The containing block
In order to specify the exact position of the element, you have to add top, bottom, left, and/or right declarations. These all give coordinates relative to the top/left or bottom/right reference point. What is this reference point?
* No reference point, since a static block cannot be moved.
* The position the block would take if it were not moved (i.e. if it had ; * The containing block, which is the first ancestor element that does not have If there is no such ancestor, the <html> element serves as the containing block. (Note: in older browsers the <body> element serves as the default containing block.)
* The viewport (browser window).
static
An element with always has the position the normal flow of the page gives it. It cannot be moved from this position; a static element ignores any top, bottom, left, or right declarations.
relative
An element with initially has the position the normal flow of the page gives it, but it is subsequently offset by the amount the top, bottom, left, and/or right declarations give. Therefore, in combination with such a declaration it appears slightly skewed. The space the element originally took remains empty.
By themselves, relatively positioned elements are uninteresting, since you almost never want to skew an element by a few pixels. However, a relatively positioned element serves as a containing block; and this is the usual reason to use
An element with is taken out of the normal flow of the page and positioned at the desired coordinates relative to its containing block.
Since the absolutely positioned element is taken out of the normal flow, the normal document flow behaves as if the element is not there: it closes up the space it would take.
fixed
An element with is taken out of the normal flow of the page and positioned at the desired coordinates relative to the browser window. It remains at that position regardless of scrolling.
3109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
