Position定位

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的大小顺序依次排列的。