CSS 定位
1. CSS定位简述
CSS定位是层叠样式表单的延伸。通过样式表单语言，可以确切的定义一个HTML元素的样式，例如它的颜色，字体，边框等。CSS的定位功能，它扩展了CSS对HTML元素的定位能力，以及元素在3D空间内的位置和可见性。
CSS定位的(“position”)属性能够使用两种方法定位HTML元素：相对定位和绝对定位。所谓相对定位就是允许元素在相对于文档布局的原始位置上进行偏移(Offset)操作。而绝对定位允许元素与原始的文档布局分离并且任意定位。
需要说明的是，CSS定位只能声明一个元素的位置控制或者可见性，如果需要对这些元素的定义声明进行管理，比如隐藏，显示或者移动，那么只能通过一些外部的Scripting语言来实现(例如：javascript或VBScript)。
2. CSS定位的属性
实现定义HTML元素位置和可见性的最终手段还是通过使用属性和声明属性值。有关CSS定位的属性共有9个：
Position,Left,Top,Width,Height,Clip,Overflow,Z-index和Visibility
2.1 Position
属性值：absolute|relative|static 初始值：static 适用于：所有元素，继承：否，百分比值：不适用。
当使用“absolute”(绝对)定位元素时，该元素就被看作一个矩形的覆盖物来格式化。这个矩形的“容器”会凌驾于其他任何文档原始布局之外放置，绝对定位的元素是独立的，它既与上级元素无关，也与子元素无关。同时，它的准度和位置都不被加以考虑。因此，每一个绝对定位元素都是完全独立于其他内容的。如果已经在一个定位元素中放置了一些文字，
绝对定位的一些主要特性：
◎ 绝对定位在一段文字中定义了一个全新的矩形区域，这种功能就好像排列在窗口中元素的HTML一样。
◎ 他们使用“top”和“left”的方法进行坐标定位，在前面已经定位的内容中再一次进行定位，称作“第二次定位”。
◎ 他们的高度和宽度可以使用“height”和“width”属性分别指定。如果宽度没有给出，那么元素在默认的状态下将延伸至紧靠其上级元素右边界的的地方。如果高度没有给出，那么元素的高度将按照他们所包含的内容自动调整。就好像浮动元素一样，绝对定为了的元素一般被视作块级元素。
◎ 他们将为子元素建立一个容器定位。
当使用“relative”(相对)关键字作为“position”属性的属性值时，该元素就像其他任何普通HTML元素一样自由的填满空间布局，并且可以相对于文档元素的位置进行布局定位。但这些元素相对定位以后，他们会保留其所有的原始显示形式，包括“强制断行符”和原始保留空间。同时，紧跟这些相对定位元素的元素也不会被重新布局。在“Scripting” 语言环境下，相对定位元素的动态移动可以为他提供富有特色的动画效果。
相对定位的一些主要特性：
◎ 他们的内容在定位范围内按通常规则排列，就像普通的HTML元素一样。
◎ 他们可以被定位于相对于在文档中初始位置的地方，这一点对于Scripting语言来说很有用。因为如果想要建立动画效果，可以通过使用相对定位的方法制作。
◎ 他们本身为子元素建立了一个现成的新坐标系，子元素定位的初始位置就是这个相对定位上级元素的原始位置(即它的左上角)。
当使用“static”(静态)关键字作为“position”属性的默认设置。一个静态的元素“不能被定位”或者“二次定位”，也不能为子元素提供定位依据。
相对定位的一些主要特性：
◎ 他们的内容在定位范围内按通常规则排列，就像普通的HTML元素一样。
2.2 Left和Top
属性值：
||auto 初始值：auto 适用于：“position”属性值是“absolute”或“relative”的元素，继承：否，百分比值：参照上级元素的宽度和高度。如果上级元素的高度是“Auto”，那么百分比值就未被定义。
按照CSS的格式化模型的理论，CSS在格式化HTML文档时，时间对象放置在一个个矩形的“容器”中，然后再进行格式化的。这个矩形的作上角顶点就是定位的取值参考点。任何“left”和“top”值都是相对于左上角顶点而言的。“left”值就是“容器”的左上顶点到上级元素左边界之间的距离;“top”值就是“容器”的左上顶点到上级元素上边界之间的距离。
注意：当设计者有特殊用途时，可以声明“left”和“top”值为负值，已达到期望的效果。
2.3 Width和Height
属性值：||auto 初始值：auto 适用于：“position”属性值是“absolute”或“relative”的元素，继承：否，百分比值：参照上级元素的宽度和高度。如果上级元素的高度是“Auto”，那么百分比值就未被定义。
如果说“left”和“top”定义了元素的位置，那么“height”和“width”则规定了元素所占有空间的大小。
对于“position”属性值是“static”或“relative”的元素，已经由CSS格式化模型定义了“height”和“width”，因而保持不变。
对于“position”属性值是“absolute”的元素，如果“width”属性为“auto(默认)”，那么就意味着被定位元素的右边界将紧挨着包含他的元素的右侧内边界放置。
除了可以使用具体的长度值来指定“height”和“width”外，还可以使用百分比值，这个百分比值是参照上级元素的高度和宽度来计算的。
注意：当上级元素“height”值本身是“auto”，那么子元素“height”的值就会无所适从了。
2.4 Clip
属性值：|auto 初始值：auto 适用于：“position”属性值是“absolute”的元素，继承：否，百分比值：不适用。
虽然剪切不会影响对象的布局方式，但是它确实能够改变HTML的显示效果。一个剪切区域定义了元素的哪一个矩形部分可见。他是按照上级剪切区域的交叉部分以及该元素“clip”属性的值来计算的。
注意：有时可以重新定义剪切的矩形区域以使其更好的适应CSS面向容器的格式化模型。这种模型的每一个坐标系都是相对于相应的边界，而非基于一个固定不变的矩形区域。在这里，所有指定左上顶点为原点的方法只对从左至右的语言有效。
使用长度值时，它的值是参考该元素左上角顶点确定的。负长度值也可以使用。当转为像素坐标后，元素的右下角就被剪切矩形区域排除在外。这一条规则对于那些“零宽度”或者“零高度”矩形区域的定义很有用。
同样，任何的长度值都可以被“auto”替换。当使用“auto”值替换具体长度时，会引起相应的剪切矩形长度在给定方向上自动匹配元素的长度，其中包括所有填充距，边框和子元素。“clip”元素的初始默认值使得剪切矩形区域能够环绕整个元素。因此，使用“auto”就相当于没有进行剪切。
注意：当剪切后的区域仍旧太大以至于超越浏览器的文档窗口边界时，这些内容都可以被那个窗口剪切掉，具体的情况要视当时的操作环境而定。
2.5 Overflow
属性值：visible|hidden|scroll|auto 初始值：visible 适用于：“position”属性值是“absolute”的元素，继承：否，百分比值：不适用。
“overflow”属性决定了元素的内容在超越它的宽度和高度限制时，浏览器会怎样处理。
“overflow”属性共有四个关键词：“visible”，“hidden”，“scroll”，“auto”。
当“overflow”属性是默认的初始值“visible”时，使用这个值就说明了不论声明“width”和“height”的值是多少，其中的内容无论是否超出边框都要被强制显示。使用“visible”值后，元素的宽度可以比原先声明的更大。任何填充距或边框都仍然保留并相应的扩大。 在水平方向上向文字延伸的方向扩展。王爷使用的文字是从左向右排列的，因此宽度就向右扩展。相应的，若有一段文字的高度超出了原声明的值，那么高度也会垂直向下方延伸出去。
当“overflow”属性是“hidden”时，那么执行的效果正好与“visible”相反，任何超出原先声明宽度和高度的内容都会变得不可见。这也真正达到了剪切的效果。屏幕上不会提供任何的滚屏工具，填充距和边框也将适应于剪切后的效果，就好像它的内容根本没有超出边界一样。
当“overflow”属性是“auto”关键字时，执行效果是因浏览器不同而不同的，但是，大多数浏览器在元素内容超越边界的情况下，应该会提供一组滚动的工具。
当“overflow”属性是“scroll”指定了如果浏览器支持滚屏工具，无论元素内容是否超越了边界，这个工具都应该被显示。这避免了在一些动态显示的状态下，滚动条是否需要显示的混乱问题。
注意：即使“overflow”设定为“visible”，超出浏览器窗口的文档内容还是会被切除的；还有，使用“clip”属性也可以导致“visible”内容被剪切掉，这些方面要引起注意。
2.6 Z-index
属性值：|auto 初始值：auto 适用于：可定位的元素，继承：否，百分比值：不适用。
顾名思义，如果在XOY平面坐标系上在加一个Z坐标轴，就产生了第三个方向的立体空间概念。
“Z-index(Z指数)”就是定义元素在立体方向上的数值，也就是可定位元素的层叠顺利。
“Z-index(Z指数)”属性的初始值时“auto”，他代表把元素按照他们在HTML原代码中出现的位置从地层到顶层堆砌起来。
“Z-index(Z指数)”还可以使用整数值指定“Z-index”的值。在同级元素之间，按照“Z-index”值的递增顺序由地层至顶层堆砌。同时具有负“Z-index”值的元素被放在他们上级元素的下面，具有正“Z-index”值的元素被放在他们上级元素的上面。换句话说，每一个可定位元素都有一个内部固有的“Z-index”值是 0 。
把“Z-index”和“visibility”结合起来使用会产生你梦寐以求的3D特殊效果，如果再加入一些javascript或者VBScript的话，页面质量可能就会有质的飞跃。
2.7 Visibility
属性值：inherit|visible|hidden 初始值：inherit 适用于：所有元素，继承：在属性值是“inherit”的情况下才能继承。
visibility:属性比较容易理解，他决定了一个元素的初始显示状态是“可见”还是“不可见”。但是，一个元素的可见性并不影响他在页面上的显示布局。一个被隐藏的元素仍然占有其原有的空间位置，只是透明显示罢了。“visibility”属性可以被用在Scripting环境下在众多元素中 动态的显示某一个元素，这个元素会立刻覆盖其他的内容。
