position定位

- 定位是一种高级的布局方式，通过定位可以将一个元素放到网页中的任意位置

- 默认情况下元素的定位功能是关闭的，需要通过position属性来设置元素的定位

- position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中

    position可能的值

        •  static。

            默认值。

            没有开启定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

        •  relative。

            生成相对定位的元素，相对于其正常位置进行定位。

               因此， "left:20" 会向元素的 LEFT 位置添加 20 像素。

        •  absolute。

            生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

        •  fixed。

            生成固定定位的元素，相对于浏览器窗口进行定位。

            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

1、相对定位 relative

        - 相对定位的特点：

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

            2. 相对定位指是元素相对于其自身在文档流中的位置进行定位

            3. 相对定位不会使元素脱离文档流

            4. 相对定位不会改变元素的性质，块还是块，内联还是内联

            5. 相对定位会使元素提升一个层级

2、绝对定位 absolute

        - 绝对定位的特点：

            1. 开启了绝对定位以后元素会完全脱离文档流

            2. 绝对定位会改变元素的性质，块元素宽和高默认都被内容撑开，内联元素变成块元素

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

            4. 开启绝对定位以后，元素相对于离他最近的开启了定位的祖先元素进行定位

                如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进行定位

                所以一般情况下，我们在开启一个元素的绝对定位时，都会同时开启它父元素的相对定位

            5. 绝对定位会使元素提升一个层级

3、固定定位 fixed

        - 当元素的position属性设置为fixed时，则开启元素的固定定位

        - 固定定位也是一种绝对定位，所以它的大部分特点都和绝对定位相同

            不同的是，固定定位永远相对于浏览器的窗口进行定位的

            而且固定定位的元素不会随浏览器窗口的滚动而滚动

- 偏移量：

    当元素开启了定位以后，我们就可以通过偏移量来修改元素的位置

    我们一共有四个偏移量：

        top

            - 当前元素距离定位元素顶部的距离

        bottom

            - 当前元素距离定位元素底部的距离

        left

            - 当前元素距离定位元素左侧的距离

        right

            - 当前元素距离定位元素右侧的距离

            - 注意偏移量只对开启了定位的元素起作用

            - 一般情况四个偏移量中我们只需要使用两个，即可为一个元素进行定位，一个水平方向，一个垂直方向的

- 层级

    定位  > 浮动 > 文档流

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

            z-index值越高，层级越高，层级越高越优先显示

        • z-index需要一个正整数作为参数

        • z-index只对开启了定位的元素起作用