[转][译]关于CSS中的float和position和z-index

原文：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning

当构建页面排版时，有不一样的方法可使用。使用哪种方法取决于具体页面的排版要求，在不一样的状况下，某些方法可能好过于其余的方法。

好比，可使用若干个浮动元素来构建一个整洁简洁的页面排版。或者，若是须要更复杂的排版要求，能够考略使用其余方法，好比使用相对定位和绝对定位。

在这篇文章中，咱们首先要讨论元素浮动；而后，咱们要讨论如何使用x,y和z轴控制元素的位置。

 

元素浮动

当构建一个页面的排版时，使用元素浮动是一种直观的方法去控制元素的位置。元素浮动可让一个元素靠近或者远离另外一个元素。它根据一个元素的大小和其父节点容器的大小来构造这个元素在排版中与其余元素之间的关系。

当一个元素被浮动时，这个元素是挨着前一个元素，仍是出如今新的一行？这取决于它相邻元素的位置。

固然，元素浮动在提供强大威力的同时，也带来了不少问题。一个著名的问题就是，当一个父节点包括了若干浮动的子元素时，父节点的排版会考虑到浮动子元素的大小和位置，可是子元素并不会影响父节点的大小。在这种状况下，父节点的height变成了0，而且忽略其余属性。不少时候，这个问题没有被注意到，特别是当父节点没有附合任何的CSS样式，并且嵌套的元素也看上去被正确地排列了。

若是没有正确地排列嵌套元素，那么可能引起排版上的错误。请参阅下面的这个例子，类名为.box-set的DIV容器应该有浅灰色的背景，可是由于其嵌套元素都是浮动元素，因此本来指望的背景色没有出现。若是你查看.box-set的盒模型，你会发现它的height值为0。

 

<style>
.box-set {
    background: #e8eae9;
}
.box {
    background: #8ec63f;
    height: 100px;
    float: left;
    margin: 10px;
    width: 200px;
}
</style>
<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

 

 

一个解决方法是在父容器闭合标签前加上一个空元素，而且设置它的clear:both。“清除浮动元素”这一招能够解决大多数状况，可是它并非“语义正确”的。随着页面上须要清除的浮动元素的数量增长，须要的空节点的数量也随之增长，可是这些空节点并无任何的HTML语义。

幸运的是，有一些其余技巧一样使用，最著名的就是使用overflow和clearfix的技巧。

 

使用overflow

在父容器上设置overflow:auto可让它自动包含子元素，从而具备了实际的height值，这样上例中的灰色背景将获得显示。

在IE6中使用这一招时须要给父节点容器设置height或者width属性。由于实际状况中height经常是可变的，因此是设置width的值。对于苹果平台上的IE，设置overflow:auto将会给容器增长滚动条，因此最好是设置overflow:hidden。

 

.box-set {
    background: #404853;
    overflow: auto;
}

 

 

这一招有些反作用。例如，须要增长样式或者移动子元素超出了父容器的范围时，好比实现边框阴影或者加上一个下拉菜单。在下面的例子中你将看到，当边框阴影超出父容器的范围时就会被遮盖了，同时第二个子元素排列有问题。

 

 

使用clearfix

clearfix一般搭配:before或者:after伪元素使用。使用伪元素就是在包含浮动元素的父容器的前面或者后面创造一个隐藏的元素。经过对:before伪元素使用display:table来建立一个匿名的table-cell元素，从而防止子元素的top margin消失。这一招在IE6和7中具备一致的效果。一样的，经过设置:after伪元素来防止子元素的bottom margin消失。

另外，须要对父容器使用*zoom属性触发hasLayout机制来解决IE6和7的一致性。hasLayout机制决定了元素应该怎样渲染和框住它的内容，以及元素间的位置关系。

在下面使用clearfix的例子中，你将看到元素就算超出了父容器也能够显示了。（注意边框阴影）

 

.box-set:before, .box-set:after {
    content: "";
    display: table;
}
.box-set:after {
    clear: both;
}
.box-set {
 *zoom: 1;
}

 

 

有效地包含浮动元素

具体使用哪个技巧取决于你的我的习惯。有些人倾向于使用clearfix技巧，由于它在跨浏览器上的一致性更好。另外一些人以为clearfix须要更多的代码。所以，选择哪一个技巧不重要，重要的是注释注明和写进文档。

一个常见的实现就是给全部须要包含浮动元素的父容器一个统一的类名，方便管理样式。好比使用下列代码，这样只需给须要包含浮动元素的父节点加上group的类名便可。

 

.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
 *zoom: 1;
}

 

Position属性

有些状况下，你须要更多的对元素位置的控制，这时候就须要使用position属性了。position属性一共有五种不一样的取值。

 

Position Static

这是position属性的默认取值，意味着这个元素没有也不接受任何对于该元素的位置偏移量属性。

在下列的例子中，全部的盒子都将一个接一个的堆起来。由于它们都是块级元素，而且没有被浮动。

 

<style>
.box-set {
    background: #e8eae9;
}
.box {
    background: #8ec63f;
    height: 80px;
    width: 80px;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

 

 

Position Relative

relative定位很是相识于static定位。最大的区别就是相对定位的元素可使用偏移量：top, right, bottom, left。这四个偏移量可让元素朝任何方向移动，从而精确的控制显示出来的位置。

注意，尽管相对定位的元素可使用偏移量属性，可是它在网页排版时按照的倒是跟static position相同的方式（这点区别于fixed position和absolute position）。另外，相对定位的元素能够覆盖其它元素，或者被其它元素覆盖，尽管它自身并无偏移。

在下列的例子中，全部的盒子都是一个接一个的堆起来。可是他们按照各自被定义的offset相对于本来的位置作了改变。因此，有些盒子覆盖了其余的盒子，而不是推开其余盒子。若是一个元素是相对定位（甚至它还作了偏移），它周围的元素在排版时参考的依然是那个元素本来的位置（指在没有偏移时的位置）。

 

<style>
.box-set {
    background: #e8eae9;
}
.box {
    background: #8ec63f;
    height: 80px;
    position: relative;
    width: 80px;
}
.box-1 {
    top: 20px;
}
.box-2 {
    left: 40px;
}
.box-3 {
    bottom: -10px;
    right: 20px;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

 

 

若是同时声明top和bottom的值，那么top值的优先级更高。若是同时声明left和right的值，那么优先级取决于网页的语言（例如，英语法语德语西班牙语）。好比，在英语的网页中，left的优先级更高；在阿拉伯语的网页中，right的优先级更高。

 

Position Absolute

绝对定位的元素接受偏移量。在排版中，绝对定位的元素从原来的位置上被抹去了（所以它后面的元素将占领它目前的位置），而后根据它的相对定位的父节点的位置定位。若是它没有相对定位的父节点，那么元素直接参考body容器定位。

对绝对定位的元素使用偏移量属性，这个元素将以相对定位的父节点做为参考系进行偏移。

若是没有对绝对定位的元素使用偏移量属性，那么该元素将被放置在父节点的左上角。若是只设置了top属性，那么该元素则只作垂直方向的偏移，而水平方向依然靠着父节点的最左边。

在下面的例子中，全部的盒子相对于父容器做了绝对定位。若是偏移量是正数，那么盒子被“往里推”了；若是偏移量是负数，那么盒子被“往外拉”了。

 

<style>
.box-set {
    background: #e8eae9;
    height: 200px;
    position: relative;
}
.box {
    background: #8ec63f;
    height: 80px;
    position: absolute;
    width: 80px;
}
.box-1 {
    top: 6%;
    left: 2%;
}
.box-2 {
    top: 0;
    right: -40px;
}
.box-3 {
    bottom: -10px;
    right: 20px;
}
.box-4 {
    bottom: 0;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>

 

若是绝对定位的元素有固定的height和width值：

若是同时声明top和bottom的值，那么top值的优先级更高。若是同时声明left和right的值，那么优先级取决于网页的语言（例如，英语法语德语西班牙语）。好比，在英语的网页中，left的优先级更高；在阿拉伯语的网页中，right的优先级更高。

若是绝对定位的元素没有固定的height或者width值：

若是元素并无固定height值，但是却同时有top和bottom的值，那么该元素将横跨除了top和bottom以外剩下的全部高度。同理，若是元素并无固定width值，但是同时有left和right的值，那么该元素将横跨除了left和right以外剩下的全部宽度。若是元素既没有固定height和width值，却同时有top, bottom, left, right值，那么该元素将占据除了四条边距离以外的全部空间。

 

Position Fixed

固定定位的元素跟绝对定位的元素很类似，只不过它参照的坐标系是浏览器的视口(viewport)。固定定位的元素不随着页面滚动而移动，它会始终保持在那个位置。另外，在IE6中使用固定定位有一个BUG，须要使用一些hack来解决。

一个典型的使用固定定位的例子是网页中的顶部横条或者底部横条。当用户滚动页面时，那个横条始终停留在浏览器视口的顶部或者底部。

 

<style>
footer {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
}
</style>
<footer>Fixed Footer</footer>

 

z-index属性

网页是一个二维空间，根据x轴和y轴展现各个元素。但是，若是你须要让某个元素放置在其余元素的上面（可在默认的排版中，她并非在他的上面），这时你能够改变她的z-index属性，让她跑到他的上面。

元素在z轴的位置的位置取决于它在DOM中出现的前后顺序。若是两个元素发生重叠，先在DOM中出现的元素一般排在后出现元素的下面。改变先出现元素的z-index属性是一个简单的方法让他出如今更上面。拥有最高z-index属性的元素永远被排在最上面，与它在DOM树中的位置无关。

若是你须要设置一个元素的z-index属性，你必须首先设置这个元素是relative，absolute或者fixed定位。就像对于设置top, bottom, left, right属性同样。

 

<style>
.box-set {
    background: #e8eae9;
    height: 160px;
    position: relative;
}
.box {
    background: #8ec63f;
    border: 3px solid #f7941d;
    position: absolute;
}
.box-1 {
    left: 10px;
    top: 10px;
}
.box-2 {
    bottom: 10px;
    left: 70px;
    z-index: 3;
}
.box-3 {
    left: 130px;
    top: 10px;
    z-index: 2;
}
.box-4 {
    bottom: 10px;
    left: 190px;
    z-index: 1;
}
</style>
<div class="box-set">
  <div class="box box-1">Box 1</div>
  <div class="box box-2">Box 2</div>
  <div class="box box-3">Box 3</div>
  <div class="box box-4">Box 4</div>
</div>