在处理网页时，浏览器将一个元素放置在哪里，首先需要看该元素的显示类型。主要的类型有块级元素(block)和内联元素(inline)两种。块级元素默认将会单独一行显示，且宽度是其所在容器的100%。而内联元素和其它元素在同一行显示，其大小由里面的内容确定，不能指定。各种元素的默认显示类型都是不一样的，比如 div 元素是块级元素，而 span 是内联元素。如果需要改变显示类型，可以在CSS中用 display: block; 或 display: inline; 来改变。
块级元素比如 div 的位置可以有更加自由的调整。首先，可以使用浮动(float)属性将它和其它元素在同一行显示。float 属性可以取三个可能的值：left，使元素向左浮动；right，使元素向右浮动；none，消除浮动。几个有 float 属性的 div将在同一行显示，除非它们的宽度合起来超过窗口的宽度。在IE8中有一个奇怪的问题，即两个宽度均为50%的浮动 div 没法在同一行显示。
和 float 属性一起的还有一个用于清除浮动的 clear 属性。clear 属性取值为 left，表示该元素不跟着左浮动的元素放在一行。还有right，both，none 这三个取值，含义类似。
接下来需要考虑的是 position 属性，它主要有四个取值：static，relative，absolute 和 fixed。它们的具体用法如下：
- static 是默认值，表示按照前面所述的正常位置放置元素。
- relative 表示按照本来的位置再作一定长度的水平或者竖直偏移，偏移值用 left，right，top，和 bottom 这四个属性值来指明。当然一般只需要用到其中两个偏移值。
- absolute 表示从文档流中脱离出来，相对于第一个位置值不为 static 的上级元素的位置进行定位，位置值由 left，right，top 和 bottom 的值来设定。如果上级元素的位置都是 static，就相对 html 元素来定位。
- fixed 表示从文档流中脱离出来，相对浏览器窗口进行定位，位置值由 left，right，top 和 bottom 的值来设定。
使用 relative，absolute 或者 fixed 方式来定位元素，会造成元素之间的覆盖。我们可以使用 z-index 属性来设置覆盖的前后（z-index 实际上就是z坐标的意思）。z-index 的默认值为 auto。如果把它设置为某个整数值（可正可负），将导致值越大的元素排在越前面。注意对 static 位置的元素设置 z-index 无效。
最后还有个 overflow 属性，设置内容超过元素的大小时的处理方式，其取值有 visible，hidden，scroll，auto 和 inherit。前面两个值设置为显示或裁剪溢出的内容，scroll 值设置为始终显示滚动条，auto 为溢出时才显示滚动条。
参考资料：
[1] html块级元素内联元素速查
[2] CSS float/clear属性应用实例
[3] CSS绝对定位和相对定位
[4] CSS 定位 (Positioning) - W3school
[5] Learn CSS Positioning in Ten Steps
[6] CSS z-index 属性 - W3school
[7] CSS overflow 属性 - W3school
[8] KB012: 绝对定位( Absolute positioning ) - W3Help
[YAML] Date: 2011-05-14 17:36:16, Updated: 2012-06-16 12:37:00