总结CSS中定位模型-position的用法

一、position元素介绍

position属性规定了元素的定位类型，通过定位，可准确地定义元素相对于其正常位置而应该出现的位置，或者是相对于父元素、另一元素和浏览器窗口等的位置。

position属性包含有5个属性值，分别为static、relative、absolute、fixed。

具体如下表所示：

定位属性:

设置position属性只会让元素脱离文档流，需要设置偏移属性使元素移动。包括4个偏移属性，分别为top、bottom、left、right。

具体描述如下表所示：

偏移属性的值可以为负值，负值时向相同方向移动。一般设置时设置一个或两个偏移量即可。

二、属性值详细介绍

首先设置示例的显示内容，分别设定了三个div块元素，并分别设置class属性值。HTML源代码如下：

<div class="div0">
<div class="div1 div">This is div1.</div>
<div class="div2 div">This is div2.</div>
<div class="div3 div">This is div3.</div>
</div>

设置原始示例的显示效果，为了截图容易理解，将body设置为3px的红色边框。包围三个div块的大div块设置1px的黑边框，灰色的背景色以及50%的宽度。三个div块则设置相同的边框和100px的高度。CSS源代码如下：

body {
border: 3px solid red;
}
.div0 {
border: 1px solid black;
width: 50%;
background-color: #f0f0f0;
margin: 50px;
}
.div {
height: 100px;
border: 1px solid black;
margin: 20px;
padding: 5px;
}

最终的示例效果图如下：
图片:

1、relative——使元素相对于文档流的位置偏移一段距离
元素遵循默认的文档流，相对于元素的原位置进行移动，周围元素忽略该元素的移动。需要设置top、bottom、left、right的值进行相对定位。

举个栗子：设置第二个div块的position属性为relative，并且设置偏移量为向右偏移50px、向下偏移50px。

.div2 {
background-color: #e0e0e0;
position: relative;
left: 50px;
top: 50px;
}

可以看到如下效果图中，第一和第三块div块并没有移动位置，说明relative属性值使元素遵循默认的文档流。设置偏移量后，第二块div块则向右、向下分别偏移50px。

.div2 {
background-color: #e0e0e0;
position: relative;
left: -50px;
top: 50px;
}

当设置左偏移量为-50px时，则如下图所示，第二元素块向左偏移了50px。

2、absolute——使元素相对于文档流的位置或最近定位祖先元素的位置偏移一定的距离

元素脱离默认的文档流，相对于包含该元素的第一个非静态定位的元素进行定位。需要设置top、bottom、left、right值进行j绝对定位。

对于元素，使用width、height可以设置它的尺寸，设定百分数是相对于最近定位祖先元素的尺寸。

举个栗子*2：设置第二个div块的position属性为absolute，并且设置偏移量为向右偏移50px、向下偏移50px。注意此时没有设置该元素的父元素的position值为非默认值。

.div2 {
background-color: #e0e0e0;
position: absolute;
left: 20px;
top: 20px;
}

可以从图中看到，第三块div元素向上移动，第二块元素脱离了原来的文档流。而在没有设置该元素的父元素的position值为非默认值时，第二块div元素块是相对于body的值来向右、向下偏移的。

再来看设置了该元素的父元素的position值为非默认值的情况。

.div0 {
border: 1px solid black;
width: 50%;
background-color: #f0f0f0;
margin: 50px;
position: relative;
}

当设置了该元素的父元素的position值为非默认值的情况时，此时的第二块div元素块则是相对于包含三个元素块的大div元素块来进行向右、向下的偏移。

3、fixed——使元素相对于视口偏移一定的距离

元素脱离默认的文档流，相对于最外层的window进行定位，固定在屏幕上的某个位置，不因屏幕滚动而消失。需要设置top、bottom、left、right值进行定位。

举个栗子*3：设置第二个div块的position属性为fixed，并且设置偏移量为向右偏移20px、向下偏移200px。

.div2 {
background-color: #e0e0e0;
position: fixed;
right: 20px;
top: 200px;
}

从图中看出，第二个div元素块的位置在右下角，是相对于视口进行了向左20px、向下200px的偏移。并且在页面滑动时，也会保持着同样的位置不变。

三、Z-index

Z-index可用于设置元素之间的层叠顺序。只对于定位元素有效，即只对于position属性的属性值为absolute、relative和fixed有效。静态定位元素按照文档出现顺序从后往前进行堆叠。设定位置元素忽略文档出现顺序，根据z-index值由小到大的顺序从后往前堆叠，即Z-index的值越高表示元素显示的顺序越优先。设置为负值z-index的设定位置元素位于静态定位元素和非设定位置浮动元素之下。z-index值不必为连续值，其默认值为auto。当设置的值相同时，后加载的元素优先显示。

举个栗子*4：将relative示例的元素设置-index值为-1。

.div2 {
background-color: #e0e0e0;
position: relative;
left: 50px;
top: 50px;
z-index: -1;
}

从图中可以看到，当元素的z-index设置为负值时，设定位置元素是位于静态定位元素之下，即是di第二个div元素的父元素div0的位置之下

四、总结

元素的定位模型中需要区分每个属性值的不同定位方式，分为绝对定位、相对定位、固定定位以及默认定位和继承父元素。其中绝对定位和固定定位都脱离原本的文档流，而相对定位则遵循原本的文档流。设置元素的定位方式后，还需要指定偏移量。可以从上、右、下、左四个方向进行偏移。并且可以利用Z-index属性设置元素之间的层叠顺序。

定位模型是在CSS中设置元素位置的重要方式之一，使用该模型可以实现页面常用的菜单导航、悬浮公告等效果。