CSS的定位

一、定位的概念

通过定位可以将元素随意摆放，属性名为position，通过偏移量来设置的，偏移量的可选值：top、height、left、right

二、定位的分类

一、相对定位（relative）

1.设置相对定位必须设置偏移量否则没有效果

2.偏移量设置的位置是相对于之前的位置(也就是下图中大的黑色框框）

3.设置相对定位后不会脱离文档流，本身的性质也不改变 行内元素还是行内元素，块元素还是块元素但是提高了自己的层级

  二、绝对定位 (absolute)

与相对定位的区别：1.元素会脱离文档流   2.会改变元素的性质

特点：1.不设置偏移量元素位置不改变

           2.元素从文档中脱离，且提高了一个等级

            3.会改变元素的性质，行内元素变成块元素，块元素具有行内元素的性质，块的宽高是被内容撑开的。

             4.是相对于包含块进行定位的

                 包含块：离开启绝对定位最近的开启了相对定位的祖先元素，如果所有的祖先元素都没有设置相对定位，那么根元素就是它的包含块

   ---下图为有祖先元素开启了相对定位

---下图为没有祖先元素开启相对定位

三、.固定定位 (fixed)

是一种绝对定位，但是是相对于浏览器的视口，不会随着滚动条的滚动而滚动，适合设置广告位

四、粘滞定位 (sticky)

当到达某一位置时候固定不动

是一种相对定位

还有一种可选值为static，表示元素静止不动，个人认为没有意义

它们的共同特点

都会将元素提升一个层级，不改变偏移量没有效果

五、元素的层级

开启定位后会将元素提高一层级，也可以通过 z-index： 来指定元素的层级 可选值为整数，值越大层级越高，离眼睛越近。

兄弟元素：

    z-index的值越大，层级越高

父子元素：

   父元素 z-index的值再大也不会覆盖子元素（不会高过子元素的层级）