CSS定位

相对定位

position: relative;

1、开启后，元素位置不变，需要配合偏移量移动

2、偏移原点在元素原来在文档流的位置

3、开启后，提高元素的层级

4、不改变元素性质

绝对定位

position: absolute;

1、开启绝对定位后，元素会脱离文档流

2、元素的性质是发生了改变，不再区分块，行内，行内块

3、开启绝对定位，它的位置也需要配合偏移量移动

4、偏移原点：以其包含块为偏移原点

一般情况下，给子元素设置绝对定位，会同时给父元素设置相对定位

这叫“子绝父相”，具体的偏移原点，需要根据方便来

5、开启绝对定位，元素的层级会提高

包含块：

1、没有定位的时候，指它的上一级元素

2、有定位的时候，是离他最近的，开了定位的祖先元素

如果都没有开启定位，包含块就是根标签，也就是整个页面

固定定位

position: fixed;

1、元素会脱离文档流，元素的性质会发生改变

2、元素位置需要配合偏移量使用

3、偏移原点:是整个页面

4、不会随着滚动条的滚动而滚动

5、应用场景：侧边栏，广告，底部导航，顶部导航·····

粘滞定位

position: sticky;

1、不会脱离文档流，元素的性质也没有发生改变

2、也需要配合偏移量移动位置，一般配合top，没有到达top值之前，会随着滚动条的滚动而滚动到达top值之后，就会固定不动

3、sticky是属于css3新增的一个样式值，兼容性略高，兼容到ie10

4、应用场景：侧边栏，广告，底部导航，顶部导航·····

粘滞定位 （一般用于页面导航的吸顶效果)

-当元素的position属性设置为sticky时，则开启了元素的粘滞定位

（1）以浏览器为参照物（体现固定定位特点）；

（2）占有原来位置（体现相对定位特点）；

（3）粘滞定位可以在元素到达某个位置时，将其固定

（4）没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

层级（Z-index）

如果定位元素的层级是一样，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级

层级越高，越优先显示

注意：

对于没有开启定位的元素不能使用z-index

父元素的层级再高，也不会盖住子元素