Position
position 的取值有4个，分别是
position: static | relative | absolute | fixed | inherit
其中每一项代表着不同的定位方式：
static 定位
元素就正常得按照流的方式组合，block 元素会带边框，inline 元素一行包括多个元素。
relative 定位
原来的位置会占着，然后位置相对于包含块偏移。形状保持未定位前的形状。
absolute 定位
元素相对于包含块偏移，在文档流中不占据位置，不曾来过。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 定位
和 absolute 定位基本一致，不过包含块固定为页面视图。
一些细节：
对于偏移
如果都设置了 top/bottom/left/right，那么以 top/left 生效。
定位属性
dataintable
width:30%;
属性 | width:65%;
描述 | width:5%;
CSS
---|---|---
[/cssref/pr_pos_bottom.aspbottom](<pre) | 设置定位元素下外边距边界与其包含块下边界之间的偏移。 | 2
[/cssref/pr_class_clear.aspclear](<pre) | 规定元素的哪一侧不允许其他浮动元素。 | 1
[/cssref/pr_pos_clip.aspclip](<pre) | 剪裁绝对定位元素。 | 2
[/cssref/pr_class_cursor.aspcursor](<pre) | 规定要显示的光标的类型（形状）。 | 2
[/cssref/pr_class_display.aspdisplay](<pre) | 规定元素应该生成的框的类型。 | 1
[/cssref/pr_class_float.aspfloat](<pre) | 规定框是否应该浮动。 | 1
[/cssref/pr_pos_left.aspleft](<pre) | 设置定位元素左外边距边界与其包含块左边界之间的偏移。 | 2
[/cssref/pr_pos_overflow.aspoverflow](<pre) | 规定当内容溢出元素框时发生的事情。 | 2
[/cssref/pr_class_position.aspposition](<pre) | 规定元素的定位类型。 | 2
[/cssref/pr_pos_right.aspright](<pre) | 设置定位元素右外边距边界与其包含块右边界之间的偏移。 | 2
[/cssref/pr_pos_top.asptop](<pre) | 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 | 2
[/cssref/pr_pos_vertical-align.aspvertical-align](<pre) | 设置元素的垂直对齐方式。 | 1
[/cssref/pr_class_visibility.aspvisibility](<pre) | 规定元素是否可见。 | 2
[/cssref/pr_pos_z-index.aspz-index](<pre) | 设置元素的堆叠顺序。 | 2
Inline-block
display属性的一个值。这个名字的由来是因为，display 设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。
- 块级元素（block elements）,来源于CSS盒子模型。块级元素包含 width,height,padding,border 与 margin，他们的排列方式是从上到下排列。
- 行内元素（inline elements）排列方式是水平排列。
- 行内块元素（inline-block elements）在内部他的表现类似block元素，比如他拥有block元素的width,height,padding,border 与 margin，而外部的排列方式有类似行内元素，即水平排列，而不是像块级元素一样从上到下排列
虽然设置浮动跟设置inline-block有些特征类似，但两者的区别还是非常明显的:
- 文档流（Document flow）:浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。
- 水平位置（Horizontal position）：很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。
- 垂直对齐（Vertical alignment）：inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
- 空白（Whitespace）：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴
- IE6和IE7：Ie67对此属性部分支持。如果你要兼容这些浏览器，必须解决这个问题。这不是个大问题，但值得留意一下。
float
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
一个元素浮动之后，他原来的位置就空着呢，会被其他元素占领，但是，这个浮动的元素会覆盖占据位置的元素。需要调整覆盖顺序需要使用 z-index 进行调整。
用法
- 制作水平导航栏
- 创建无表格的首页 - 使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页。
clear
clear left | right | both | none | inherit
clear 元素可以清除 float 的影响，也就是不占用 float 元素原来的位置。
overflow
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
|---|---|
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
clip
clip rect(top, right, bottom, left) | auto | inherit
如果一个绝对定位元素的内容移除其内容框，而且overflow 设置为要求剪裁该内容，通过 clip 属性可以改变剪裁区域的形状。
在不同浏览器中的实现方式不一致。
rect
rect 的值是距离左上角的距离。不能为百分比；
visibility
visible| 默认值。元素是可见的。 | hidden| 元素是不可见的。但是还是会占据着位置。 | collapse| 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为
hidden
。 | inherit| 规定应该从父元素继承 visibility 属性的值。