position 5种定位 静态定位 + 绝对定位 + 相对定位 + 粘性定位 + z-index

静态定位（默认值）：static　　不受偏移值影响

绝对定位：absolute 和 fixed  统称为绝对定位

相对定位：relative

粘性定位：sticky

 

偏移值上下左右：top bottom left right

 

一、relative 相对定位：

相对于原来的位置移动，仍在文档流中，不影响其他元素，例： 元素相对于原来位置 远离 左上(向右下)偏移，只是撑大了容器

.box2{
height:100%;
position:relative;
left: 50px;
top: 50px;
}

 

二、absolute 绝对定位：

脱离文档流（漂浮起来了），会影响其他元素定位，其他元素会顶上原来它的位置

//设置绝对定位，宽度会变，会根据容器中最大固定的元素的大小来决定（不算其中漂浮起来的元素）

1、所有父元素都没有设置绝对或相对定位时，则相对于最近的父元素漂浮起来，有偏移值时相对于根元素即 html 定位（没有父元素）偏移

2、父元素不是默认值static时，有多级父元素，会根据离得最近的不是默认值static（设置了绝对或相对定位） 的父元素进行定位

只设置 absolute 定位，不设置偏移值时：相对于最近的父元素漂浮起来，其他元素占据原来的位置

设置 absolute 定位 + 偏移值 时：相对于最近的有定位的父元素偏移

// 后浮起的覆盖前面浮起的

 

三、fixed 绝对定位：

相对于浏览器窗口定位

 

四、sticky 粘性定位：

1、必须设置一个偏移值：top bottom left right；

2、父元素高度不能低于sticky元素的高度

3、父元素不能有 overflow:hidden 或者 overflow:auto 属性

4、粘性定位只在父元素里生效

相当于在 relative 定位 和 fixed 定位之间切换。行为就像 relative 定位，但是当页面滚动时，它的表现为 fixed定位，

不脱离文档流，但是在父元素中相对于浏览器窗口定位，不会超过父元素，最多到父元素底。如果父元素被滚条滚没了，则 sticky 元素会跟着父元素一起消失

 

---

 

Z-index

可以设置元素的叠加顺序，但依赖定位属性，仅能在定位（ position:relative /absolute /fixed /sticky ）元素上奏效。

如果两个定位元素重叠(比如都是 absolute 定位)，没有指定z - index，按照html中元素的顺序，前面的被盖住，后面的叠在上面。

1、auto 默认。堆叠顺序与父元素相等。

2、number 设置元素的堆叠顺序。负数为最下层依次叠加，为负值，元素被普通流中的元素覆盖

3、inherit 规定应该从父元素继承 z-index 属性的值。