10步掌握CSS布局定位: position static relative absolute float

	10步掌握CSS定位: position static relative absolute float 1. position:static 元素的 position 属性默认值为:static，即该元素出现在文档的常规位置，不会重新定位。 通常此属性值可以不设置，除非是要覆盖之前的定义。 #div-1 { position:static; } 2. position:relative 设置了 position:relative，便可以结合top 、 bottom、 left 、 right 的属性来偏移其文档的常规位置。 例如将 div-1 向下移动 20 像素、向左移动 40 像素: #div-1 { position:relative; top:20px; left:-40px; } 注意 div-1 未被移动之前的地方，现在多了一点空隙，紧接着 div-1 的元素(div-after)却没有被移动，事实上即便 div-1 被移动了，它仍占据原始位置。 貌似 position:relative 用处不大(我到觉得这点很有用)，但在后面的内容中显得尤为重要。 3. position:absolute 设置了 position:absolute，即绝对定位，便可以将元素放在文档中任何想放的位置。 例如将 div-1a 放置到右上角： #div-1a { position:absolute; top:0; right:0; width:200px; } 注意！由于 div-1a 被移走, 页面中的其他元素位置也变了： div-1b, div-1c, div-after 都因此上移了。 div-1a 被放置在页面的右上角。 能直接地定位元素很方便，但作用也不大。 这里真正要做的是将 div-1a 相对于 div-1 定位，这就又要讲到 relative 属性了。 注 IE浏览器Bug：设置了相对宽度(如 "width:50%")，该宽度将基于父元素而非自身。 4. position:relative + position:absolute 设置div-1的位置为 relative ， div-1中元素的定位都将相对于div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角： #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } 5. 两列绝对定位 接下来使用relative 和absolute 实现两列的绝对定位： #div-1 { position:relative; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } 使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置，可以对元素任意放置，此处故意将div-1b放到div-1a之前； 注意，还有个元素被绝对定位的元素遮住了，怎么办？ 6. two column absolute height 一种办法是设置固定高度。 但不是万全之策，因为元素的高度、字体的大小并不总是确定的。 #div-1 { position:relative; height:250px; } #div-1a { position:absolute; top:0; right:0; width:200px; } #div-1b { position:absolute; top:0; left:0; width:200px; } 7. float(浮动) 针对高度不定的情况，绝对定位不好用，于是想到另一方案。 可以尽量使用向左或向右浮动来实现文字环绕，特别是环绕图片，此处用于更复杂的布局工作(也只有用这种方法)。 #div-1a { float:left; width:200px; } 8. 多列浮动 将两列都像左浮动，可以实现两列并列。 #div-1a { float:left; width:150px; } #div-1b { float:left; width:150px; } 9. 多列浮动后清除浮动 将元素浮动后，再使用"clear" 清除浮动，后面内容拉向下。 #div-1a { float:left; width:190px; } #div-1b { float:left; width:190px; } #div-1c { clear:both; } 10. Disclaimer & Resources These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are many). The following page was invaluable: Relatively Absolute While you're here check out the following: BarelyFitz Designs Open-Source Software Projects BarelyFitz Designs Screencasts id = div-before id = div-1 id = div-1a Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. id = div-1b Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem. id = div-1c id = div-after