CSS之float,文档流,position详解

目录

• 1 CSS浮动
  • 1.1 浮动定义
  • 1.2 Float造成的影响
    • 1.2.1 对其父元素的影响
    • 1.2.3 对其兄弟元素（非浮动）的影响
    • 1.2.4 对其兄弟元素（浮动）的影响
    • 1.2.5 float对自身元素的影响
    • 1.2.6 float对子元素的影响
    • 1.2.7 float对父元素之外的元素的影响
    • 1.2.8 浮动让margin-top属性失效
      • 1.2.8.1 margin-top失效
      • 1.2.8.2 子元素设置margin-top作用于父容器
  • 1.3 包含浮动
    • 1.3.1 清除浮动
      • 1.3.1.1 Overflow技巧
      • 1.3.1.2 clearfix技巧
  • 1.4 文档流
    • 1.4.1 定义
    • 1.4.2 总结
• 2 定位
  • 2.1 定位属性
    • 2.1.1 Position static
    • 2.1.2 Position relative
    • 2.1.3 Position absolute
    • 2.1.4 Position fixed
  • 2.2 z-index属性

1 CSS浮动

1.1 浮动定义

float即为浮动，在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素的最左边或最右边。下面解释下这个定义中的几个名词的概念：

• 文档流：在html中文档流即为元素从上至下排列的顺序。
• 脱离文档流：元素从正常的排列顺序被抽离。
• 最左边/最右边：上述的移动到父元素最左和最右是指元素往左或往右移动直到碰到另一个浮动元素或父元素内容区的边界（不包括padding）

1.2 Float造成的影响

1.2.1 对其父元素的影响

对于其父元素来说，元素浮动之后，它脱离当前正常的文档流，所以它也无法撑开其父元素，造成父元素的塌陷，效果如下图所示

#wrapper {
    padding: 20px;
    border: 1px solid red;
    width: 350px;
}
.floatL {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    float: left;
}
.floatR {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    float: right;
}
.blue {background: #6AA;}
.red {background: #A66;}

//html
<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div></div>

1.2.3 对其兄弟元素（非浮动）的影响

如果兄弟元素为块级元素，在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素
需要注意的是，在IE 6、7下则分别都有不同的表现，IE 6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。这就是著名的IE 3px bug

//CSS，其他的样式按照上面给出的，此处就不再重复了
.block {
    width: 200px;
    height: 150px;
    border: 1px solid #000;
    background: #CCC;
}

<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div>
    <div class="block">BBBBBBBBB</div></div>

IE 6：

IE 7：

如果如果兄弟元素为 内联元素，则元素会环绕浮动元素排列。

<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div>
    文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>

<div id="wrapper">
    <div class="floatL blue">AAAAAAAA</div>
    <img src="XXX.png"></div>

1.2.4 对其兄弟元素（浮动）的影响

同一个方向的浮动元素：
当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，可以用这样一个形象的比喻来描述： 在一个购票中心里，某人从一条购票队列跑到旁边的一条购票队列中排队，那自然先跑过去的会先占据前面的位置。但这条购票队列还是位于当前的购票中心中 ，因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL blue">BBBBBBBBBB</div></div>

反方向的浮动元素：
正如上面的比喻所述，我们可以假设购票中心里左右两边的各有一个购票点（如图,这里我们把一个div看做一个购票者），左浮动的队列可看做左购票点的购票队列，反方向的浮动（即右浮动）则是右边购票点的购票队列，所以在购票中心足够宽的时候两条队列的人群是互不受影响的。因此他们在同一条水平线上

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatR blue">BBBBBBBBBB</div></div>

但当购票中心过窄或者左右两边的购票队列过长时，其中一条队列则会另起一行排列（此处为B队列，有人可能会问为什么不是A队列另起一行？从下面HTML结构上可知，这是因为在时间上，A队列比B队列更早地建立，根据先到先得的原则，B队列的购票者在位置不够的时候自然要另起了一行了）。

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatR blue">BBBBBBBBBB</div>
    <div class="floatR blue">BBBBBBBBBB</div></div>

当同一行中连一个购票者的位置都容不下时，两条队列则会错开两行

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatL red">AAAAAAAA</div>
    <div class="floatR blue">BBBBBBBBBB</div>
    <div class="floatR blue">BBBBBBBBBB</div></div>

1.2.5 float对自身元素的影响

float对象将被视作块对象(block-level)，即display属性等于block

1.2.6 float对子元素的影响

我们知道当一个元素浮动时，在没有清楚浮动的情况下，它无法撑开其父元素，但它可以让自己的浮动子元素撑开它自身，并且在没有定义具体宽度情况下， 使自身的宽度从100%变为自适应（浮动元素display:block）。其高度和宽度均为浮动元素高度和非浮动元素高度之间的最大值。

这里我们去掉#wrapper的固定宽度,并在其外部增加一个固定宽度的div,以便更好地展示

<div class="container">
    <div id="wrapper">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
    </div></div>

<div class="container">
    <div id="wrapper" style="float:left;">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
    </div></div>

.block {
    width: 250px;
    height: 50px;
    border: 1px solid #000;
    background: #CCC;
}

<div class="container">
    <div id="wrapper" style="float:left;">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
        <div class="block"></div>
    </div></div>

.block { width: 150px; height: 150px; border: 1px solid #000; background: #CCC; }

1.2.7 float对父元素之外的元素的影响

父元素之外的非浮动元素
从上面可知，当一个元素浮动时，在没有清楚浮动的情况下，它无法撑开其父元素，也就是父元素的宽高都为0。并且其父元素之外的非浮动元素也会无视该浮动元素，浮动元素仿佛到了另外一个世界里。

//CSS
.outer {
    height:150px;
    width: 350px;
    border:1px solid blue;
}

//HTML
<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div>
</div>
<div class="outer"></div>

父元素之外的浮动元素
当浮动元素的父元素之外的元素为浮动元素时，他们仿佛去到了同一个世界里。
两个元素的浮动方向相同时：

<div id="wrapper">
    <div class="floatL red">AAAAAAAA</div></div><div class="outer" style="float:left;"></div>

两个元素的浮动方向相反时：
//CSS,这里我们在他们外面增加一个固定宽高的div以便展示，否则右浮动的元素会浮动到body的右边界

.container {
    width:650px;
    height: 250px;
    border: 1px solid #000;
}

<div class="container">
    <div id="wrapper">
        <div class="floatL red">AAAAAAAA</div>
    </div>
    <div class="outer" style="float:right;"></div></div>

<div class="container">
    <div id="wrapper">
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
        <div class="floatL red">AAAAAAAA</div>
    </div>
    <div class="outer" style="float:right;"></div></div>

1.2.8 浮动让margin-top属性失效

关于margin-top属性失效的解决方法
常出现两种情况：

1.2.8.1 margin-top失效

先看下面代码：

<div> 
<div classdivclass="box1">float:left</div> 
<div classdivclass="box2">clear:both;margin-top:20px;</div> 
</div> 

两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距margin-top没有效果。
网上能找到的两种比较靠谱的解释：

1. “在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”
2. 当第一个层浮动，而第二个没浮动层的margin会被压缩，

得到解决问题思路：要浮动一起浮动，要就一起不浮动。
解决办法：

1. box2增加float属性
2. box1与box2之间增加一层<div style="clear:both;"></div>

1.2.8.2 子元素设置margin-top作用于父容器

<div classdivclass="box" style="height:100px;background:red;"> 
<div classdivclass="box2">clear:both;  
margin-top:20px;height:50px;width:500px;  
background:#000;</div> 
</div> 

当给box2设置margin-top时，在FF下仅作用于父容器。
解决办法：

1. 给父容器box加overflow:hidden;属性
2. 父容器box加border除none以外的属性
3. 用父容器box的padding-top代替margin-top

1.3 包含浮动

创建一全页面的布局时，浮动是一种常用的方法，也是页面元素定位的一种基本功能。浮动可以让元素一个挨着一个。浮动可以创建一个自然流布局，同时充许元素设置自身尺寸和其父元素容器的尺寸大小。
当元素浮动时，一个元素的位置依赖于放置在他周边的其他元素。那么围绕在他周边的是哪个元素呢？这个元素会换行吗？这一切都取决于围绕于他的元素的DOM（文档对象模型）。

1.3.1 清除浮动

虽然浮动相当的给力，但他们自己还是存在一定的问题。最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为0，以及忽略其他的属性。很多时候，这种现像都被忽略，特别是在父元素没有任何样式，以及其子元素看起来都正确的对齐。
嵌套的元素不会正确的排列，也会有错误的样式出现。来看看下面的演示，在.box-set的div应该有一个高亮的灰色背景，因为所有的子元素浮动后，这个灰色的背景色并不看到。仔细检查后，.box-set的高度变成了“0

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>    

.box-set {
  background: #e8eae9;}.box {
  background: #8ec63f;
  height: 100px;
  float: left;
  margin: 10px;
  width: 200px;} 

有一种方法，在容器的结束标签前添加一个空标签，在空标签上直接设置样式clear:both。用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。这取决于一个页面有多少浮动需要清除，这样造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。
幸运的是有几种不同方法可以用来清除浮动，而其中用得最多的是overflow技巧和clearfix技巧。

1.3.1.1 Overflow技巧

一种清除浮动的技巧是使用overflow属性。在具有浮动元素的父容器中设置overflow的属性值为auto，这样父容器就会有一个高度存在，在我们例子中的灰色背景也就能看得到了。
在IE6里面，父容器是需要设置一个width和height。因为高度可能是一个变量，宽度为100%，他们将能正常的工作。使用overflow:auto;,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用overflow:hidden;来清除浮动。

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

清除浮动后效果

使用overflow技巧清除浮动，确实存在一些缺点。例如：当你添加样式，或者将嵌套在里面的span元素移动到父容器的外面，或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中，你可以看到元素的盒子阴影被切断在父元素之内。
不同的浏览器对overflow属性解析不一样，在浏览器的显示风格也不一样。看看下面的例子，注意列在不同浏览器的显示效果

1.3.1.2 clearfix技巧

根据上下文，清除浮动更好的方法是clearfix技巧。clearfix清除浮动的技术是有点复杂，但是有比使用overflow技巧清除浮动更好的方法？
“clearfix技巧是基于在父元素上使用:before和:after两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。:before伪类是用来防止子元素顶部的外边距塌陷，使用display: table创建一个匿名的table-cell元素。这也确保在IE6和IE7下具有一致性。:after伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。
采取上面同样的例子，可以看到容器也清除了浮动，元素也可以移到父容器外面

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

清除浮动后效果

1.4 文档流

1.4.1 定义

用W3C上面的一句话来概括：元素的位置由元素在 (X)HTML中的位置决定
要很好的理解上面这句话，可以用排除法。CSS的定位机制有3种：

• 普通流
• 浮动（float：left/right/none）
• 定位 （position:static/relative/absolute/）

普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。

例：

<div id=”01”></div>
<div id=”02”></div>
<div></div>

很显然这是最普通的文档流，从左到右，一个挨一个按照顺序01先，02其次，03最后排列。

一旦给其中的某个DIV进行FLOAT属性或者absolute定位（不包括static/relative，这两个依然保持正常的文档流），则它完全脱离文档流，不占空间。

为了能更好辨认，分别给01绿色，02灰色，03黄色。然后再给01左浮动。结果，01脱离了文档流，完全不占空间，所以02顺势顶替了01原来的位置，结果02被01盖住了。

同理，absolute定位跟FLOAT一样，脱离了文档流，不再占原来文档流的空间了。
再举一个大家在日常经常遇到的问题来印证—高度自适应
反复想一想，高度自适应的原理其实就是这个：

<div id=”a”>
<div id=”b”>这是b</div>
<div id=”c”>这是c</div>
</div>

这个结构是a包住b和c，颜色不变，a的高度为自动，b的高度为100，C的高度为500。b和c都为左浮动
结果：很明显a没有被撑开。原因是它们浮动了就不再占空间了。既然没有空间可占，那就等于容器里没有东西，所以不撑开。解决办法是在黄色DIV的后面加个DIV，然后清除浮动。让他有空间可占，自然就撑开了

1.4.2 总结

1. CSS的定位机制有3种：普通流、浮动和定位。
2. 文档流：从上到下，从左到右，一个挨一个的简单或者叫正常布局。
3. 定位：（position）

Static：保持文档流。
Relative：相对本身的原始位置发生位移且保持文档流，自己占有空间
Absolute：脱离文档流，不占空间且相对于其包含块来定位。

4. 浮动：（flaot）脱离文档流，不占空间。
5. 以前总是觉得position：static这个属性很多余，现在看来他的作用就是让元素保持文档流的

2 定位

2.1 定位属性

很多情况下，需要控制更多元素的位置，而且超过了浮动所能提供的范围，这个时候我们就需要发挥position属性的作用。position属性提供五个不同的属性值，每种不同的方式可以给元素提供不同的位置。

2.1.1 Position static

元素都有position属性，其默认值是static，这也意味着，他们没有也不接受位置属性设置（top、right、bottom、left属性值设置）。另外元素设置了position属性，将会覆盖元素的默认值static。
在下面的演示中，所有的盒子都是静态的，每个盒子都在相邻盒子顶部，因为他们都是块元素，而且没有进行浮动设置。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>    

.box-set {
  background: #e8eae9;}.box {
  background: #8ec63f;
  height: 80px;
  width: 80px;} 

效果

2.1.2 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值）

设置了位移属性的相对定位元素，在页面中仍然是正常的、静态的，仍属于自然流。在这种情况下，其他元素不会占用相对定们元素当初的位置。此外，其他元素没有进行位置移动时，相对定伴元素可能会和其他元素重叠。
在下面的演示中，每个元素还是在另一个元素顶部，然后他们根据自己移位属性，从默认位置进行移动，由于他们移向方向不一样，这些值使元素重叠在一起。当元素设置了相对定位时，周边的元素也能看到相对定位元素的默认位置。（也就是说，相对定位元素的默认位置还是被元素自身占用，别的元素是无法占用的。也就是说相对定位元素的位移是相对于元素自身的边缘进行位移）。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>    

.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;} 

效果：

事实上，一个相对定位元素同时设置了top和bottom位移属性值，实际上top优先级高于bottom。然而，一个相对定位元素同时设置了left和right位移属性，他们的优先级取决于页面使用的是哪种语言，例如，如果你的页面是英文页面，那么left位移属性优先级高，如果页面是阿拉伯语，那么right的位移属性优先级高。

2.1.3 Position absolute

绝对定位元素也具有盒子位移属性，然而，绝对定位元素会脱离文档流。绝对定位元素直接从文档流中移出，绝对定位元素的位置直接和父容器是否设置了相对定位（绝对定位）有直接关系。绝对定位元素需要至少一个祖先元素设置了相对定位（绝对定位），不然元素定位会相对于页面的主体进行定位。
使用绝对定位的元素可以指定垂直和水平的位移属性，使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。例如，一个绝对定位的元素设置了top值为50px和一个right值为100px,绝对定位元素会相对于其设置了相对定位的父元素的顶边向下移动50px;向左移动100px。
然而，使用了绝对定位的元素并没有进行任何盒子位移属性设置，那么绝对定位元素的顶部和左部会和设置了相对定位的父元素的顶边和左边重合。如果设置了一个盒子位移属性，比如说top，那么绝对定位元素垂直方向会进行移动，而水平位置默认还是左边对齐。
在下面的演示中，可以看到所有的盒子都相对于div的父元素进行绝对定位，每个元素都从特定的面使用定位值进行移动，而且使用了负值的，元素移动到盒子的外面。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>    

.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;} 

效果

当一个绝对定位的元素有固定的高度和宽度，并且盒子位移同时设置了top和bottom时，top更具优先组，另外和相对定位元素一样，当同时设置了left和right时，优先级取决于他的页面使用的语言。
当一个绝对定位的元素没有明确指定高度和宽度，同时使用盒子位移的top和bottom属性时，会使整个元素的高度跨越整个容器。同样的，当这个元素同时使用位移left和right属性值，会使整个元素的宽度跨越整个容器。如果同时使用位移四个属性，可以指定一个宽度和高度显示元素。（这个时候绝对定位元素的宽度和高度都是100%。）

总结：当position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

• 当父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时按照这个parent来进行定位。
  注 意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以parent的哪个定位点来进行定位呢？如果parent设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。
• 如果不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解

2.1.4 Position fixed

固定定位和绝对定位很类似，但是定位是相对于浏览器窗口，并且不会随滚动条进行滚动。也就是说，不管用户停留在页面那个地方，固定定位的元素将始终停留在页面的一个地方
fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位
position属性值中，仅有fixed属性值不能在IE6浏览器下运行，如果你想在IE6正常使用固定定位，那么就需要为他写一些Hacks。
固定定位元素的盒子位移属性的使用和绝对定位的一样。
保持前面盒子移位，可以看到盒子固定定位是相对于浏览器窗口而不是设置了相对定位的父元素。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>    

.box {
  background: #8ec63f;
  height: 80px;
  position: fixed;
  width: 80px;}.box-1 {
  top: 6%;
  left: 2%;}.box-2 {
  top: 0;
  right: -40px;}.box-3 {
  bottom: -10px;
  right: 20px;}.box-4 {
  bottom: 0;} 

效果

固定页头和页脚

固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，还是固定在页面与用户交流

下面的示例代码能实现。注意如何设置left和right两个盒子位移，这使得“页脚”跨越了页面的整个宽度，而不需使用margin、border和padding来破坏盒模形就做了收缩自如。

< footer >Fixed Footer </footer> 

footer {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;} 

2.2 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的值，第二个盒子在第一个和第三个上面，第三个盒子在第四个上面。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div></div>  

 .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;} 

不设置z-index效果

设置z-index效果

转载于：http://learn.shayhowe.com/advanced-html-css/detailed-css-positioning