Position static
元素都有position属性，其默认值是“static”，这也意味着，他们没有也不接受位置属性设置（top、right、bottom、left属性值设置）。另外元素设置了position属性，将会覆盖元素的默认值“static”。
在下面的演示中，所有的盒子都是静态的，每个盒子都在相邻盒子顶部，因为他们都是块元素，而且没有进行浮动设置。
HTML
< class="box-set"> < class="box">Box 1</> < class="box">Box 2</> < class="box">Box 3</> </>
CSS
.box-set {
background: #e8eae9;
{
background: #8ec63f;
height:
width:
效果
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”值）。
设置了位移属性的相对定位元素，他在页面中仍然是正常的、静态的，仍属于自然流。在这种情况下，其他元素不会占用相对定们元素当初的位置。此外，其他元素没有进行位置移动时，相对定伴元素可能会和其他元素重叠。
在下面的演示中，每个元素还是在另一个元素顶部，然后他们根据自己移位属性，从默认位置进行移动，由于他们移向方向不一样，这些值使元素重叠在一起。当元素设置了相对定时，周边的元素也能看到相对定位元素的默认位置。（也就是说，相对定位元素的默认位置还是被元素自身占用，别的元素是无法占用的。也就是说相对定位元素的位移是相对于元素自身的边缘进行位移）。
HTML
< class="box-set">
< class="box">Box 1</>
< class="box">Box 2</>
< class="box">Box 3</>
</>
CSS
.box-set {
background: #e8eae9;
{
background: #8ec63f;
height:
position: relative;
width:
.box-1
.box-2
.box-3 {
bottom:
right:
效果：
事实上，一个相对定位元素同时设置了“top”和“bottom”位移属性值，实际上“top”优先级高于“bottom”。然而，一个相对定位元素同时设置了“left”和“right”位移属性，他们的优先级取决于页面使用的是哪种语言，例如，如果你的页面是英文页面，那么“left”位移属性优先级高，如果你的页面是阿拉伯语，那么“right”的位移属性优先级高。
Position absolute
绝对定位元素也具有盒子位移属性，然而，绝对定位元素会脱离文档流。绝对定位元素直接从文档流中移出，绝对定位元素的位置直接和父容器是否设置了相对定位（绝对定位）有直接关系。绝对定位元素需要至少一个祖先元素设置了相对定位（绝对定位），不然元素定位会相对于页面的主体进行定位。
使用绝对定位的元素可以指定垂直和水平的位移属性，使绝对定位元素相对于设置了相对定们的祖先元素边缘进行移位。例如，一个绝对定位的元素设置了“top”值为“50px”和一个“right”值为“100px”,绝对定位元素会相对于其设置了相对定位的父元素的顶边向下移动50px;向左移动100px。
然而，使用了绝对定位的元素并没有进行任何盒子位移属性设置，那么绝对定位元素的顶部和左部会和设置了相对定位的父元素的顶边和左边重合。如果设置了一个盒子位移属性，比如说“top”，那么绝对定位元素垂直方向会进行移动，而水平位置默认还是左边对齐。
在下面的演示中，你可以看到所有的盒子都相对于div的父元素进行绝对定位，每个元素都从特定的面使用定位值进行移动，而且使用了负值的，元素移动到盒子的外面。
HTML
< class="box-set"> < class="box">Box 1</> < class="box">Box 2</> < class="box">Box 3</> </>
CSS
.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;/四个盒子的父级元素是box-sex,相对box-set定位
}
效果
当一个绝对定位的元素有固定的高度和宽度，并且盒子位移同时设置了“top”和“bottom”时，“top”更具优先组，另外和相对定位元素一样，当同时设置了“left”和“right”时，优先级取决于他的页面使用的语言。
当一个绝对定位的元素没有明确指定高度和宽度，同时使用盒子位移的“top”和“bottom”属性时，会使整个元素的高度跨越整个容器。同样的，当这个元素同时使用位移“left”和“right”属性值，会使整个元素的宽度跨越整个容器。如果同时使用位移四个属性，可以指定一个宽度和高度显示元素。（这个时候绝对定位元素的宽度和高度都是100%。）
Position fixed
固定定位和绝对定位很类似，但是他定位是相对于浏览器窗口，并且不会随滚动条进行滚动。也就是说，不管用户停留在页面那个地方，固定定位的元素将始终停留在页面的一个地方。“position”属性值中，仅有“fixed”属性值不能在IE6浏览器下运行，如果你想在IE6正常使用固定定位，那么你就需要为他写一些Hacks。
固定定位元素的盒子位移属性的使用和绝对定位的一样。
保持前面盒子移位，可以看到盒子固定定位是相对于浏览器窗口而不是设置了相对定位的父元素。
HTML
< class="box-set"> < class="box">Box 1</> < class="box">Box 2</> < class="box">Box 3</> </>
CSS
.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来破坏盒模形就做了收缩自如。
HTML
< footer >Fixed Footer </footer>
CSS
footer {
bottom: 0;
left: 0;
position: fixed;
right: 0;
}
通常都认为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”的值，第二个盒子在第一个和第三个上面，第三个盒子在第四个上面。
HTML
< class="box-set"> < class="box">Box 1</> < class="box">Box 2</> < class="box">Box 3</> </>
CSS
.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效果
