css中的position（定位）有四个属性，比较容易搞混，这里做一个小结来区分方便以后的使用。
position的四个属性值：1.static 2.fixed 3.relative 4.absolute
1.static定位：position的默认值，一般不设置position属性时，元素会按照正常的文档流进行排列。静态定位的元素不会受到top, bottom, left, right影响。
2.relative： 相对于本身的位置进行偏移（static定位下的元素位置为本身的位置，因为static不受top, bottom, left, right的影响），所以会发生与其他元素重叠的情况，但原本所占的空间不会改变（即static和relative在文档流中，与fixed和absolute相反）。相对定位元素经常被用来作为绝对定位元素的容器块。
3.fixed定位： 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会随之移动。fixed定位使元素的位置与文档流无关，因此不占据空间。会与其他元素重叠。（总之，fixed是特殊的absolute）
4.absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，即浏览器窗口。这句话可以做以下详解： <div id="parent">
<div id="sub1">sub1</div>
<div id="sub2">sub2</div></div> 当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：
(1).当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了 margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上 角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。 接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于 parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于 sub1，而是直接从parent开始。
(2)如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位。
绝对定位的元素位置与文档流无关，与fixed一样，不占据空间。（只要父级元素设了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的））。
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
