基本概念

利用定位，可以准确的定义元素框相对于其正常位置，相对于父元素或者相对于浏览器的相对位置。

position：static | relative | absolute | fixed

static：对象遵循常规流。此时4个定位偏移属性不会被应用。
relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
fixed：与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。

包含块

前面谈到浮动元素的包含块。对于浮动元素，其包含块定义为最近的块级祖先元素，对于定位元素，情况如下面规则。

(1) 元素的positnion的值是relative和static，包含块则由最近的块级框表单元格或行内快的内容边界构成

.block {
    width: 400px;
    height: 200px;
    background-color: #669966;
    border: 5px solid #3333FF; 
}

.relative {
    width: 100px;
    height: 50px;
    background-color: #484848;
    border: 5px solid #990066; 
    position: relative;
    top: 10px;
}

.inline {
    background-color: #00CC00;
    border: 5px solid #990066; 
}

table td {
    background-color: #00CC00;
}

strong {
    position: relative;
    top: 10px;
}

<div class="block">
    <div class="relative">
        relative text
    </div>
</div>
<table>
    <tr>
        <th>Name</th>
    </tr>
    <tr>
        <td>
            <div class="relative">
                relative text
            </div>
        </td>
    </tr>
</table>
<br /><br />
<span class="inline">
    Test inline text 
    <strong>this is strong text</strong>
</span>

(2) 元素的position值是absolute，包含块设置为最近的position值不是static的祖先元素

如果这个祖先是块级元素包含块则设置为该元素怒的内边距边界，换句话说，就是由边框界定的区域。
如果祖先元素是行内元素，包含块则设置为该祖先元素怒的内容边界。
如果没有找到祖先元素，则以根元素为基准。

我们现在将上面的例子中的子元素relative改成absolute.

.block {
    width: 400px;
    height: 200px;
    background-color: #669966;
    border: 5px solid #3333FF; 
}

.relative {
    width: 100px;
    height: 50px;
    background-color: #484848;
    border: 5px solid #990066; 
    position: absolute;
    top: 10px;
}

.inline {
    background-color: #00CC00;
    border: 5px solid #990066; 
}

table td {
    background-color: #00CC00;
}

strong {
    position: absolute;
    top: 10px;
}

效果如图，当前由于都没有找到可参照的祖先元素，所以两个div和一个strong元素都以body作为参照物。

然后我们将父级元素设置为relative.

.block {
    width: 400px;
    height: 200px;
    background-color: #669966;
    border: 5px solid #3333FF; 
    position: relative;
}

.relative {
    width: 100px;
    height: 50px;
    background-color: #484848;
    border: 5px solid #990066; 
    position: absolute;
    top: 10px;
}

.inline {
    background-color: #00CC00;
    border: 5px solid #990066; 
}

table td {
    background-color: #00CC00;
    position: relative;
}

span {
    position: relative;
}

strong {
    position: absolute;
    top: 10px;
}

现在可以看到当前具有position:absolute的元素都已经有了自己的position属性不为static的祖先元素了。

内容溢出和裁剪

如果元素的内容大于元素的大小。则可能会发生文字内容溢出当前元素。如下图

.block {
    width: 200px;
    height: 200px;
    background-color: #669966;
    position: relative;
}

<div class="block">
  WASHINGTON - Mars will look bigger and brighter in the coming weeks than it has appeared in the last 15 years, according to NASA.
  On July 31, Mars will travel to the closest point in its orbit to Earth, about 57.6 million km from our planet. This is the shortest Earth-Mars distance since 2003.
  When Mars and Earth are close to each other, Mars appears very bright in our sky. It also makes it easier to see with telescope or the naked eye.
</div>

这个时候在某些情况下可能造成页面混乱。此时我们需要使用overflow去控制这种情况。

overflow：<overflow-style>

默认值：visible
visible：对溢出内容不做处理，内容可能会超出容器。
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

.block {
    width: 200px;
    height: 200px;
    background-color: #669966;
    position: relative;
    overflow: hidden;
}

内容裁剪

auto：对象无剪切
rect(<number>|auto <number>|auto <number>|auto <number>|auto)：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。上-左方位的裁剪：从0开始剪裁直到设定值，即上-左方位的auto值等同于0；右-下方位的裁剪：从设定值开始剪裁直到最右边和最下边，即右-下方位的auto值为盒子的实际宽度和高度；

使用clip达到和上面visiable同样的效果

.block {
    width: 200px;
    height: 200px;
    background-color: #669966;
    position: absolute;
    clip: rect(auto auto 200px auto);
}

Z轴上的位置

对于所有定位，最后都不免遇到这样一种情况：两个元素试图放在同一个位置上。显然，其中一个必须盖住另外一个。如何控制哪个元素放在上层，则引入了z-index。

z-index: auto | <integer>

auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
<integer>：用整数值来定义堆叠级别。可以为负值。

利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字有坐标系统而来，其中从左向右是x轴，从上到下是y轴。第三个轴则是z轴，则是面向文档流的方向。

div {
    position: absolute;
}

.first {
    width: 400px;
    height: 400px;
    background-color: red;
}

.second {
    width: 200px;
    height: 200px;
    background-color: gray;
}

.third {
    width: 100px;
    height: 100px;
    background-color: blue;
}

<div class="first">      
</div>
<div class="second">      
</div>
<div class="third">      
</div>

如图此时，没有设置z-index的情况下，三个div按照文档加载的方式布局排列，此时我们将第三个div的z-index设置为0，此时没有变化。说明z-index默认为0，当我将z-inde设置为-1的时候，当前div就会被前面两个div覆盖。

* z-index的比较基本是在同一层级，也就是拥有同一个父元素。如果是不同层级的比较，则需要依靠z-index的比重大小决定。

* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（position属性值设置除默认值static以外的元素，包括relative，absolute，fixed样式）

CSS - 定位