关于position定位及z-index的理解

 

       position属性规定元素的定位类型，顾名思义，它是用来描述元素使用什么方式，如何来定义位置的属性。position的值有 5个：absolute（绝对定位），fixed（固定定位），relative（相对定位），static（默认值），inherit（继承）。我们所 要理解的只是前4种，对于inherit，任何的版本的 Internet Explorer （包括 IE8）都不支持，而且基本使用很少。

 

       在讲定位前首先我们需要理解文档流的概念。页面内的所有标签元素以及显示的内容，默认都是在文档流中，也即是说，所有的内容都在一层上，如下图：

       但是在某种情况下，内容是可以脱离文档流存在的，这时内容就浮在了文档之上，成为两层甚至更多层，如下图：

 

 

       当脱离文档流内容较多，并且相互重叠的时候，就有可能发生本想完全显示的内容被其他内容遮挡的结果，这时我们就需要人为指定哪个层在上面，哪个在下面，z-index属性就是干这个用的。

 

       预热结束接下来进入正题。

 

       导致内容脱离文档流的行为有两种，一种是浮动（float），另一种是定位（absolute，fixed）。这篇主要讲定位，因此只针对position讲解。

 

       首先理解下这4种定位类型的区别。

 

       static类型（默认）  我们可以理解为无定位，在文档流内。

 

       relative类型（相对定位）  所谓的相对定位是指相对自己定位，这种定位不脱离文档流。无论如何移动，只是相对于自己原始的位置，是看起来在那，而实际上还在文档流内。可以参考下图：

       absolute类型（绝对定位）  使 用这种定位的元素，其位置是跟据其父元素或祖先元素定位的。具体为拥有相对或绝对定位或固定定位属性的祖先元素，如果祖先元素中无一个拥有定位属性，则参 照整个浏览器可视区域的整个文档定位（并非body而是html，下面会进行验证）。与相对定位不同，使用绝对定位的元素是脱离文档流的。参考下图：

 

 

       fixed类型（固定定位）  这种定位是将元素固定在屏幕可视区域的某个位置，不随滚动条拖拽而改变位置。

 

       开始实例讲解。

 

html：

    <div id="box1">
        <div id="box2"><p>我是子元素</p></div>
        <p>我是父元素</p>
    </div>

 

css：

    #box1 {
        width: 200px;
        height: 100px;
        margin: 50px 0 0 100px;
        background: #cd1f8d;
    }

    #box1 p {height: 400px;}
    #box2 {
        width: 100px;
        height: 50px;
        background: #1faacd;
        top: 10px;
        left:10px;
    }

 

父元素static（默认）

1. 子元素static（默认）

    #box1 { position: static; }
    #box2 { position: static; }

      当元素没有设置position属性时，其默认值是static，这时元素不脱离文档流，在文档流中占有一定空间。拖拽滚动条时，子元素的位置随父元素的滚动条位置的变化而变化。

 

2. 子元素relative（相对定位）

    #box1 { position: static; }
    #box2 { position: relative; }

      当父元素为static，子元素为relative时，其视觉效果是相对于自身原始位置所做偏移，但是其位置并并没有改变。

 

3.子元素absolute（绝对定位）

    #box1 { position: static; }
    #box2 { position: absolute; }

 

      当父元素为static，子元素为absolute时，子元素就已经脱离了父元素的文档流，相当于浮起来一层，不再占据原来的位置，子元素后面的元素会向上移动占据这块位置。拖拽滚动条，子元素不会跟随变化。

 

4.子元素fixed（固定定位）

    #box1 { position: static; }
    #box2 { position: fixed; }

      当父元素为static，子元素为fixed时，子元素同样脱离文档流，不随滚动条变化而变化。

 

父元素relative（相对定位）

1. 子元素static（默认）

    #box1 { position: relative; }
    #box2 { position: static; }

      当父元素为relative，子元素为static时，效果同父元素static（默认）中的1。

2. 子元素relative（相对定位）

    #box1 { position: relative; }
    #box2 { position: relative; }

      当父元素为relative，子元素为relative时，效果同父元素static（默认）中的2。

3.子元素absolute（绝对定位）

    #box1 { position: relative; }
    #box2 { position: absolute; }

      当 父元素为relative，子元素为absolute时，可以看到，子元素脱离文档流，不占据原来的位置，浮在了其他元素上面。但是其位置却与父元素 static（默认）中的3不同，而是相对于父元素的位置而定位，具体参考点就是父元素的左上角0 0坐标那个点。子元素的位置随滚动条变化而变化。

 

4.子元素fixed（固定定位）

    #box1 { position: relative; }
    #box2 { position: fixed; }

      当父元素为relative，子元素为fixed时，效果同父元素static（默认）中的4。

父元素absolute（绝对定位）

1. 子元素static（默认）

    #box1 { position: absolute; }
    #box2 { position: static; }

      当父元素为absolute，子元素为static时，效果同父元素static（默认）中的1。

2. 子元素relative（相对定位）

    #box1 { position: absolute; }
    #box2 { position: relative; }

      当父元素为absolute，子元素为relative时，效果同父元素static（默认）中的2。

3.子元素absolute（绝对定位）

    #box1 { position: absolute; }
    #box2 { position: absolute; }

      当父元素为absolute，子元素为absolute时，效果同父元素relative（相对定位）中的3。

4.子元素fixed（固定定位）

    #box1 { position: absolute; }
    #box2 { position: fixed; }

      当父元素为absolute，子元素为fixed时，效果同父元素static（默认）中的4。

父元素fixed（固定定位）

1. 子元素static（默认）

    #box1 { position: fixed; }
    #box2 { position: static; }

      当父元素为fixed，子元素为static时，效果同父元素static（默认）中的1。

2. 子元素relative（相对定位）

    #box1 { position: fixed; }
    #box2 { position: relative; }

      当父元素为fixed，子元素为relative时，效果同父元素static（默认）中的2。

3.子元素absolute（绝对定位）

    #box1 { position: fixed; }
    #box2 { position: absolute; }

      当父元素为fixed，子元素为absolute时，效果同父元素relative（相对定位）中的3。

4.子元素fixed（固定定位）

    #box1 { position: fixed; }
    #box2 { position: fixed; }

      当父元素为fixed，子元素为fixed时，效果同父元素static（默认）中的4。

 

      结论：

      1. 无论父元素使用何种定位，子元素使用static，显示效果相同。
      2. 无论父元素使用何种定位，子元素使用relative，显示效果相同。
      3. 无论父元素使用何种定位，子元素使用fixed，显示效果相同，且定位参照浏览器可视区域（并非html也非body）
      4. 子 元素使用absolute，父元素为relative或absolute或fixed时，显示效果相同，子元素参考父元素的00坐标进行定位。如果父元素 为static或者未设置时，子元素将以离它最近的拥有relative或absolute或fixed属性的祖先元素为参考进行定位。如果其祖先元素均 没有找到，则参照显示器可视区域的整个页面文档进行定位（再次强调是html而非body）。

 

验证结论3

使用fixed定位的元素，其定位参照浏览器可视区域。

示例

css：

    html {
        height: 150px;
        overflow: hidden;
        position: relative;
    }
    body {
        overflow: auto;
        width: 350px;
        height: 100%;
        position: relative;
    }
    #demo {
        width: 50px;
        height: 50px;
        background: #cd1f8d;
        position: fixed;
        top: 50px;
        left: 50px;
    }

 

html：

    <div id="demo"></div>
    <div style="height: 3000px;"></div>

 

效果：

 

      由此可见，当一个元素使用了fixed定位后，无论其祖先元素中定位属性如何设置，都不会影响到这个元素，并且应用fixed的元素定位不参照任何标签，包括html和body，其位置参照浏览器可见区域进行定位。

 

验证结论4

      使用absolute定位的元素，如果其祖先元素中均未设置relative或absolute或fixed属性，则其定位参照整个文档，即html标签，若祖先元素中有设置relative或absolute或fixed属性的元素，则参照此元素，如果有多个，则参照离它最近的那个，默认body是没有定位属性的，即static。

 

示例1

css：

    html {
        height: 150px;
        overflow: hidden;
    }
    body {
        overflow: auto;
        width: 350px;
        height: 100%;
    }
    #demo {
        width: 50px;
        height: 50px;
        background: #cd1f8d;
        position: absolute;
        top: 50px;
        left: 50px;
    }

 

html：

    <div id="demo"></div>
    <div style="height: 3000px;"></div>

 

示例1效果：

 

示例2

css：

    html {
        height: 150px;
        overflow: hidden;
    }
    body {
        overflow: auto;
        width: 350px;
        height: 100%;

        position: relative;
    }
    #demo {
        width: 50px;
        height: 50px;
        background: #cd1f8d;
        position: absolute;
        top: 50px;
        left: 50px;
    }

 

html：

    <div id="demo"></div>
    <div style="height: 3000px;"></div>

 

示例2效果：

 

      关于绝对定位的实用技巧：

      元素自动居中显示

      使用absolute模拟fixed定位，兼容ie6，及ie7 8 9和火狐谷歌等浏览器

 

更复杂的定位——使用z-index

 

      一个元素，如果设置了relative或absolute或fixed，那么，top，right，bottom，left值就会起效，通过调整这些值，我们就可以让两个或者更多元素相互间叠在一起，甚至完全重叠。

 

示例

css：

    #box1 {
        width: 200px;
        height: 100px;
        position: relative;
        background: #3b8ede;
        display: inline-block;
        top: 20px;
        left: 50px;
    }
    #box2 {
        width: 200px;
        height: 100px;
        position: relative;
        background: #81bc00;
        display: inline-block;
        top: 50px;
        left: 30px;
    }

 

html：

    <div id="box1"></div>
    <div id="box2"></div>

 

示例效果：

      默认均未设置z-index的情况下，无论box1和box2设置relative，absolute还是fixed，效果都是box2在box1上面，如果我们把html中的box1和box2的位置上下互换的话，box1会在box2上面，因此，进行定位的元素在html中越靠后，层级越高。

      当 我们把box1和box2的z-index值都设为0时，效果不变，依然是box2在box1之上，由此，我们得知，z-index设置层级相同的元素， 在html中位置越靠后的元素，层级越高。当我们把box1的z-index值设为0，box2不设置z-index值时，效果依然如此，根据刚得到的结 论得知，元素默认z-index值为0（css文档中已经说明，这个是用实例验证）。如果我们让box1的z-index值大于box2的z-index 值（z-index可取负数），那么box1就会跑到box2上面。

 

示例效果：

 

      那么是不是z-index值最高的元素就一定在最上面，z-index值最的元素就一定在最下面？答案是否定的，父元素的z-index值比子元素的z-index值高，即使子元素的z-index值取负值，子元素依然会在父元素之上。

 

示例

css：

    #box1 {
        width: 200px;
        height: 200px;
        background: #3b8ede;
        position: absolute;
        display: inline-block;
        left: 50px;
        top: 30px;
        z-index: 1;
    }
    #box1 p {
        width: 100px;
        height: 100px;
        background: #81bc00;
        left: 100px;
        position: absolute;
        z-index: 4;
    }
    #box2 {
        width: 200px;
        height: 200px;
        background: #f4436d;
        position: absolute;
        display: inline-block;
        left: 200px;
        top: 80px;
        z-index: 1;
    }
    #box2 p {
        width: 100px;
        height: 100px;
        background: #ffc845;
        position: absolute;
        z-index: -1;
    }

 

html：

    <div id="box1">
        <p></p>
    </div>
    <div id="box2">
        <p></p>
    </div>

 

示例效果：

 

      如 果按照z-index值越高，层级越高，z-index值越低，层级越低的想法来看，绿色（#box1 p）z-index值最高应该在最上面，蓝色 （#box1）与红色（#box2）相同，但在html中靠后，所以红色（#box2）在蓝色（#box1）上面，黄色（#box2 p）在最下面，但是 事实显然并非如此。

 

      那么我们该如何判断哪个元素层级高哪个元素层级低呢？

 

      我们可以把进行定位的元素想象成一个抽屉，其子元素无论定位与否都在它内部，只不过是在抽屉内部的上面中间或下面。

 

      如 此一来，我们就可以先比较蓝色（#box1）与红色（#box2），两者z-index值相同，红色（#box2）在html中靠后，所以红色 （#box2）在蓝色（#box1）上面，根据子元素必然在父元素上面的原理，绿色（#box1 p）在蓝色（#box1）上面，黄色（#box2 p） 在红色（#box2）上面，根据上面的抽屉原理，一个抽屉内的东西，就算放在最上面，也不可能会比它上面那个抽屉的最下面的东西还高。因此，红色 （#box2）在绿色（#box1 p）上面（即使它的z-index值最高），黄色（#box2 p）在最上面（即使它的z-index值最低，并且还 是负值）。

 

      篇幅已经够长了，本来想针对relative，absolute，fixed各种组合做几个示例，但是效果差不多，也就没做，只要弄懂上面的原理，基本就足够了，再复杂的层级关系，也可以一步步分解成最简单的，套用上面的原理即可理清。

 

      如果有疏漏或者不正确的地方，希望能跟我说下。呵呵~~