【CSS布局】--定位布局Static, Relative, Absolute, Fixed, Sticky & z-index

CSS position 属性有7个属性值Static, Relative, Absolute, Fixed, Sticky, inherit, initial, 主要介绍前五个常用的属性值，以及属性z-index的用法

属性值	描述
static	默认值。没有定位，元素出现在正常的文件流中。
relative	相对定位，相对于元素原位置进行偏移，其他元素不会占空。
absolute	绝对定位，脱离文件流，相对于包含元素进行偏移。
fixed	固定定位，类似absolute，包含元素为浏览器，相对于浏览器偏移，页面滚动时固定在目标位置
sticky	粘贴定位，relative和fixed的结合体，相对于原位置偏移，页面滚动时固定在目标位置。

z-index 元素重叠时，用来设置元素覆盖顺序。|

1. Static静态定位

/*默认值，可不设置*/
position:static

什么是Static静态定位？

Static静态定位是css默认的布局方式，从上到下，从左到右排列文档流，属于正常的文档流（见下图）。

2. relative相对定位

.box2{
    position:relative;
    left:15px;
    top:15px;
}

什么是relative相对定位？偏移量相对于谁？

relative相对定位是指：在确定元素的默认位置之后，通过left, right, top, bottom属性设置元素位置的偏移，偏移是相对于原位置的偏移，但是元素所占用的空间还保留在原位，其他元素不会挤占该元素的空间。(如下图所示，box2向右、下偏移了15px, box2的原位置被保留)

3. absolute绝对定位

.box2{
    position:absolute;
}

什么是absolute绝对定位？

absolute绝对定位会把当前元素移出正常文档流，后边的元素会挤占当前元素的空间，当前元素覆盖住挤占空间的元素。（如下图box2覆盖住box3）

偏移量相对于谁？

通过left, right, top, bottom属性设置元素位置的偏移，偏移相对于包含它的元素。

什么是包含元素？

距离当前元素最近的设置了position或transform或perspective属性的父元素即为当前元素的包含元素。

.container{
    position:relative;
    /*transform*/
    /*perspecitive*/
}
.box2{
    position:absolute;
    top:15px;
    left:15px;
}

通常用relative设置包含元素，box2相对于父级元素container的padding盒子边界偏移

如果某元素的所有父级元素都未设置position或transform或perspective属性，那么包含元素就是包含html的容器，即浏览器的窗口。

.box2{
   position:absolute;
   top:15px;
   left:15px;
}

4.fixed固定定位

什么是fixed固定定位？

fixed固定定位与absolute类似，都是脱离正常文档流，它的包含元素固定为浏览器窗口，无论页面如何滚动，元素都固定在同一位置不动，适合用于固定浮窗、导航条。

会把元素的宽高设置成内容的宽高。可以通过设置left=0, right=0来让元素的宽占满包含容器，也可以设置bottom=0, top=0来让高度占满包含容器。

.footer{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
}

5. sticky

什么是sticky？

相当于relative和fixed的结合体，设置元素的相对偏移，且页面滚动时sticky元素固定在浏览器中不动。

nav{
    position:sticky;
    top:0;
}

6. z-index

什么是z-index?

通过设置z-index的数值，可以实现重叠元素的置顶、置底、置上一层、置下一层。默认值为0，可以设置成正数也可设置成负数。

后定义的absolute元素会覆盖在先定义的absolute元素上：

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

box1{
    position:absolute;
}
box2{
    position:absolute;
    top：30px;
    left:50px;
}

设置z-index使得被覆盖的元素置上一层：

box1{
    position:absolute;
    z-index:5;
}

注：如果两个元素处于不同的包含元素中，且两个包含元素也设置了z-index，那么此两个元素的z-index取决于包含元素。