8.定位（position）

1.相对定位

/*元素开启了相对定位*/
position:relative;

相对定位的特点： 

        1.开启相对定位，元素不会脱离文档流，元素不会改变元素的性质。

        2.开启相对定位后，不设置偏移量，元素的位置不会发生任何变化。

        3.开启相对定位后，设置的偏移量，是根据元素原来的位置进行定位的。

        4.开启相对定位后，会提升元素的层级。

2.绝对定位

/*元素开启了绝对定位*/
position:absolute;

 绝对定位的特点：

        1.开启绝对定位之后，如果不设置元素偏移量，元素位置不会发生变化。

        2.开启绝对定位后，元素会脱离文档流，并且元素性质发生改变（块元素不再独占一行，宽高都被内容撑开）

        3.开启绝对定位后，该元素是参考离它最近的开启了定位的祖先元素所定位的，如果所有的祖先元素都没开启定位，则它的包含块是初始包含块。

        在实际开发中，常常给该元素开启定位之后，同时也会给它的父元素开启相对定位。

        4.绝对定位会提升元素层级。

3.固定定位

/*元素开启了固定定位*/
position:fixed;

 固定定位的特点：

        固定定位是一种绝对定位，它的大部分特点与绝对定位相同，不同点在于，固定定位永远是参照于浏览器窗口进行定位的。一旦定位，就不会随窗口进行滚动，永远在可视窗窗口的固定位置。

4.粘滞定位

/*元素开启了粘滞定位*/
position:sticky;

        粘滞定位的特点和相对定位类似，不会脱离文档流。

        定位的参照物：粘滞定位是相对于离它最近的拥有滚动条的祖先元素来定位的。