HTML和CSS高级指南之二——定位详解(转)
?
?
有一种方法，在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。这取决于一个页面有多少浮动需要清除，这样造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。
?
幸运的是有几种不同方法可以用来清除浮动，而其中用得最多的是“overflow”技巧和"clearfix"技巧。
?
Overflow技巧
?
一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中设置“overflow”的属性值为“auto”，这样父容器就会有一个高度存在，在我们例子中的灰色背景也就能看得到了。
?
在IE6里面，父容器是需要设置一个“width”和“height”。因为高度可能是一个变量，宽度为100%，他们将能正常的工作。使用 “overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。
使用“overflow”技巧清除浮动，确实存在一些缺点。例如：当你添加样式，或者将嵌套在里面的“span”元素移动到父容器的外面，或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中，你可以看到元素的盒子阴影被切断在父元素之内。
不同的浏览器对“overflow”属性解析不一样，在浏览器的显示风格也不一样。看看下面的例子，注意列在不同浏览器的显示效果。
clearfix技巧
根据上下文，清除浮动更好的方法是clearfix技巧。“clearfix”清除浮动的技术是有点复杂，但有有比使用“overflow”技巧清除浮动更好的方法？
“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后 面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距 塌陷，以及用来清除元素的浮动。
在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。
采取上面同样的例子，你可以看到容器也清除了浮动，元素也可以移到父容器外面：
有效的包含浮动
使用哪种技巧来清除浮动，终究要看你自己喜好。有些人坚持使用“clearfix”来清除浮动，因为这种方法可以贯穿整个项目。有些人认为 “clearfix”技巧使用的代码太多，他还是喜欢简单点的。至于使用什么技巧由您来决定，只要在运用了浮动的元素的父容器需要清除浮动。
一个常见的方法是将定义一个类名，把这个类名加到需要清除浮动的容器上。例如使用“clearfix”清除浮动，Dan Cederholm为容器设置了一个类名“group”。在需要清除浮动的容器上添加这个类名“group”。
?Position relative?
?“relative”是“position”的另一个属性值，他和“static”属性值非常的相似。主要的区别是“relative”可以给元素设置位 移（offset）“top、right、bottom和left”属性。通过这些位移属性设置可以给元素进行精确的定位。
?
盒子位移属性是如何工作？盒子的位移属性有四个“top、right、bottom和left”，用来指定元素的定位位置和方向。这些属性只能在元素的“position”属性设置了“relative、absolute和fixed”属性值，才生效。
?
对于相对定位元素，这些属性的设置让元素从默认位置移动。例如，top设置一个值“20px”在一个相对定位的元素上，这个元素会在原来位置向下移动“20px”。反之，“top”设置一个“-20px”，这个元素会在原来的位置向上移动“20px”。
?
对于绝对定位和固定定位鲜红，这些属性指定了元素与父元素边缘之间的距离，例如，绝对定位的元素设置一个“top”值为“20px”，将使绝对定 位元素相对于其设置了相对定位的祖先元素顶部边缘向下移动“20px”，反之，如果设置一个“top”值为“20px”，将使绝对定位元素相对于其设置了 相对定位的祖先元素顶部边缘向上移动“20px”。（绝对定位的参考点是其祖先元素设置了“relative”或者“absolute”值）。
?
???? 设置了位移属性的相对定位元素，他在页面中仍然是正常的、静态的，仍属于自然流。在这种情况下，其他元素不会占用相对定们元素当初的位置。此外，其他元素没有进行位置移动时，相对定伴元素可能会和其他元素重叠。
?
在下面的演示中，每个元素还是在另一个元素顶部，然后他们根据自己移位属性，从默认位置进行移动，由于他们移向方向不一样，这些值使元素重叠在一 起。当元素设置了相对定时，周边的元素也能看到相对定位元素的默认位置。（也就是说，相对定位元素的默认位置还是被元素自身占用，别的元素是无法占用的。 也就是说相对定位元素的位移是相对于元素自身的边缘进行位移）。
?事实上，一个相对定位元素同时设置了“top”和“bottom”位移属性值，实际上“top”优先级高于“bottom”。然而，一个相对定位元素同时 设置了“left”和“right”位移属性，他们的优先级取决于页面使用的是哪种语言，例如，如果你的页面是英文页面，那么“left”位移属性优先级 高，如果你的页面是阿拉伯语，那么“right”的位移属性优先级高。?
Position absolute
绝对定位元素也具有盒子位移属性，然而，绝对定位元素会脱离文档流。绝对定位元素直接从文档流中移出，绝对定位元素的位置直接和父容器是否设置了相 对定位（绝对定位）有直接关系。绝对定位元素需要至少一个祖先元素设置了相对定位（绝对定位），不然元素定位会相对于页面的主体进行定位。
?
使用绝对定位的元素可以指定垂直和水平的位移属性，使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。例如，一个绝对定位的元素设置了 “top”值为“50px”和一个“right”值为“100px”,绝对定位元素会相对于其设置了相对定位的父元素的顶边向下移动50px;向左移动 100px。
?
然而，使用了绝对定位的元素并没有进行任何盒子位移属性设置，那么绝对定位元素的顶部和左部会和设置了相对定位的父元素的顶边和左边重合。如果设置了一个盒子位移属性，比如说“top”，那么绝对定位元素垂直方向会进行移动，而水平位置默认还是左边对齐。
?
在下面的演示中，你可以看到所有的盒子都相对于div的父元素进行绝对定位，每个元素都从特定的面使用定位值进行移动，而且使用了负值的，元素移动到盒子的外面。
?当一个绝对定位的元素有固定的高度和宽度，并且盒子位移同时设置了“top”和“bottom”时，“top”更具优先组，另外和相对定位元素一样，当同时设置了“left”和“right”时，优先级取决于他的页面使用的语言。
?
当一个绝对定位的元素没有明确指定高度和宽度，同时使用盒子位移的“top”和“bottom”属性时，会使整个元素的高度跨越整个容器。同样的， 当这个元素同时使用位移“left”和“right”属性值，会使整个元素的宽度跨越整个容器。如果同时使用位移四个属性，可以指定一个宽度和高度显示元 素。（这个时候绝对定位元素的宽度和高度都是100%。）
?
Position fixed
固定定位和绝对定位很类似，但是他定位是相对于浏览器窗口，并且不会随滚动条进行滚动。也就是说，不管用户停留在页面那个地方，固定定位的元素将始 终停留在页面的一个地方。“position”属性值中，仅有“fixed”属性值不能在IE6浏览器下运行，如果你想在IE6正常使用固定定位，那么你 就需要为他写一些Hacks。
?
固定定位元素的盒子位移属性的使用和绝对定位的一样。
?
保持前面盒子移位，可以看到盒子固定定位是相对于浏览器窗口而不是设置了相对定位的父元素。
?固定页头和页脚固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，还是固定在页现与用户交流。
?
下面的示例代码能实现。注意如何设置“left”和“right”两个盒子位移，这使得“页脚”跨越了页面的整个宽度，而不需使用margin、border和padding来破坏盒模形就做了收缩自如。
?z-index属性通常都认为Web页面是二维页面，显示的元素都在X轴和Y轴上。当你的元素有定位时，他们有时候会放置在另一个元素的顶部。要改变这些元素是一个 怎么样的层叠顺序，要知道z轴，z轴是用“z-index”属性来控制的。
?
一般来说，在DOM中，元素出现的时候就放置在z轴上。在Dom中，元素在顶部的要低于底部的。改变这种层叠顺序可以直接使用“z-index”来控制。元素的“z-index”值越高将会出现在越上面，不管元素在Dom哪个位置上。
?
给元素设置“z-index”属性，首先要在这个元素上设置了“position”属性值为“relatvie”、“absolute”或者 “fixed”之一。同样的，你要使用盒子位移属性，你也要先确认元素设置了“positions”属性值为“relative”、“absolute” 或者“fixed”之一。
?
在下面的登例子中，如果每个盒子都不设置“z-index”，那么第一个box在第二个下面，第二个在第三个下面，第三个在第四个下面。如果在盒子中指定“z-index”的值，第二个盒子在第一个和第三个上面，第三个盒子在第四个上面。
?设置z-index效果
