Position定位
- 一、position属性
- 二、z-index属性
一、position属性
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
position属性常用的有四个值，
值 | 描述 |
relative | 生成相对定位的元素，相对于其正常位置进行定位。(元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。) |
absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定) |
fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。(元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。) |
static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
下面我们来简单介绍一下这些值对应的效果
relative 相对定位
该值描述的相对是指相对于初始状态时元素的初始位置。在定义元素的position:relative属性后，我们可以通过top、right、bottom和left属性为元素定义位移。
我们为页面中添加一个类名为d1的div元素
CSS部分
*{
padding: 0px;
margin: 0;
}
.d1{
width: 200px;
height: 200px;
background-color: paleturquoise;
} 可以看到，初始状态下div贴紧页面的左上角。但当我们设定position: relative;top:30px;left:50px;时
而且查看盒模型我们可以看到有一圈position。
在position后面我们设定的top:30px;left:50px;可以读作使元素依线性关系远离初始位置的上端30px；远离初始位置的左侧50px；
显然，当为负值时表示向某侧接近。
absolute 绝对定位
绝对定位我们可以理解为与相对定位相反。相对定位是相对于自己的原位置定位，而绝对定位则是相对于除了自己之外的元素定位。
absolute会相对于最近的已定位父元素定位（static不算），如果元素没有已定位的父元素，则相对于浏览器窗口定位。
首先我们在d1中添加一个子元素，类名为d2。在未定义前他们是这样的位置关系。
我们试着为d2定义position:absolute;
然后和relative一样我们试着设置top和right
CSS
*{
padding: 0px;
margin: 0;
}
.d1{
width: 200px;
height: 200px;
background-color: paleturquoise;
position: relative;
margin: 30px;
}
.d2{
width: 50px;
height: 50px;
background-color: plum;
position:absolute;
top: 10px;
right: 0px;
}HTML
<div class="d1">
<div class="d2"></div>
</div>结合我们定义的top和right，可以发现d2是相对于d1进行的定位。
如果该父级元素设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，也就是忽略padding，当然并不会忽略margin和border。
absolute定位会使元素脱离文档流
fixed 绝对定位
fixed可以看作特殊的absolute，它直接相对于浏览器窗口定位。而且位置不会随着拖动滚动条而发生变化。而且fixed定位使元素的位置与文档流无关，因此不占据空间，所以会和其他元素发生重叠。
CSS
.d1{
width: 200px;
height: 200px;
background-color: paleturquoise;
position: fixed;
right: 0px;
top: 150px;
}static 默认值，无定位
static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中。因此这种定位就不会受到top、bottom、left、right的影响。
二、z-index属性
当我们学会使用position定位来移动元素的时候，很容易遇到元素重叠问题。当我们想选择让重叠在一起的元素的前后顺序时，我们可以利用z-index属性。
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
因此当我们想定义元素的层叠顺序时，可以设定z-index属性，根据该属性的值的大小来调节先后顺序。
为页面中添加两个div元素，分别添加类名为d1和d2
CSS
*{
padding: 0px;
margin: 0;
}
.d1{
width: 200px;
height: 200px;
background-color: paleturquoise;
position:absolute;
}
.d2{
width: 200px;
height: 200px;
background-color:rebeccapurple;
position:absolute;
top: 100px;
left: 100px;
}这时d1和d2是重叠在一起的，而且重叠顺序依据代码顺序，写在后面的的在上面。此时d2在上，d1在下。
接下来我们为d1设置z-index: 100;,为d2设置z-index: 1;。这时就变成了d1在上，d2在下了。因为当我们设置z-index后，元素的层叠顺序由上往下是根据z-index的大小顺序依次排列的。
