position是CSS中比较重要的一个属性，常用于页面布局，它的值有4个：

        static：默认文档流

        relative: 相对定位，相对于自身位置

        absolute：绝对定位，相对于非static父元素进行定位，脱离文档流

        fixed：固定定位，脱离文档流

目录

1、position:fixed 固定定位

        1.介绍

         2. 特性

        3. 应用场景

          4. 注意事项

            1.子绝父相

            2.子绝父绝

            3.子绝父固

2、position:static静态定位

        1.介绍

        2. 定位元素的层级顺序   层级

           3. 特性：

3. position:relative  相对定位

      1.  介绍

        2.特征

        3.  应用场景

4. position:absolute   绝对定位

        1. 介绍

        2.特征

      3.  应用场景

5. 绝对定位和相对定位的区别

6. 实现盒子居中的方法

        方法一：

方法二：

7. 定位与浮动的区别对比

8. 什么叫脱离文档流

        fixd：固定定位，相对于浏览器窗口进行定位，脱离原来的文档流

        元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

         相对属性值：Left right top bottom

            1.元素脱离正常文档流，不占位(也脱离文本流，全脱)

            2.始终相对于浏览器窗口四个角为原点进行固定定位的

            3.不会随页面的内容滚动而滚动

            4.能使不能设置宽高的行级元素设置宽高

            5.提升层级

            6.如果没有定位偏移属性，对元素本身有影响；

                相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏

                子元素设置绝对定位，父元素可以设置相对定位、绝对定位、固定定位， 这三种情况，参照元素都是父元素

         绝对定位，参照元素都是父元素

                    子元素设置绝对定位，父元素设置相对定位（一般都用这个）

                   子元素设置绝对定位，父元素设置绝对定位

                    子元素设置绝对定位，父元素设置固定定位

                static：自动定位（默认定位方式）唯一的用处就是用来取消定位。

                表示“将元素放在文档布局流的默认位置，HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

                常用于重置 定位属性：静态定位的元素不会受到 top, bottom, left, right影响。

                    语法: z-index: n;

                   1、标签添加定位之后，可以覆盖在页面的其他标签上

                   2、 后面加载的定位元素默认会覆盖在先加载的定位元素上

                   3、 z-index属性：设置定位元素的叠放次序

                   1. z-index的属性值越大，它的层级就越高

                   2. 属性值可以取值为正数，0，负数，没有单位（整数）

                  3. 属性值取值相同的情况下，按照结构中的顺序排列次序，后来居上

                   4. 正值向上调整层级，负值向下调整层级

       注意：z-index属性要与定位一起使用才有效，否则无效

        相对定位，相对元素本身的位置进行定位，相对定位不脱离自己原来的文档流，移动的位置是以自己左上角为基点来移动的

        原来位置指在文档流中默认的位置，若加上了浮动时，那么这个原来位置就是你设定浮动时的位置）的偏移，原来位置依然占据空间。

相对定位

绝对定位。

                * 相对定位的元素相对于其原始位置进行定位。

                * 元素的边距和填充会影响相对定位的元素。

                * 元素的 z 索引不会影响相对定位的元素。

                相对定位常用于微调元素的位置，实现一些简单的布局效果。它可以与其他定位技术结合使用，如绝对定位和固定定位。

                绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。

                absolute：绝对定位，相对于它上一个已经定位的祖先元素进行定位，如果所有祖先元素都没有定位就以当前屏幕进行定位。如果子元素想在父元素上定位而父元素不想挪动位置，那么就为父元素设置相对定位且父元素的top和left为0。（自绝父相）

        * 绝对定位的元素相对于其最近的定位父元素进行定位。

        * 元素的边距和填充不会影响绝对定位的元素。

        * 元素的 z 索引会影响绝对定位的元素

                绝对定位常用于创建复杂的布局效果和精确控制元素的位置。它可以脱离文档流，不会对其他元素的布局产生影响。

        绝对定位使元素的位置与文档流无关，因此不占据空间。可以理解为绝对定位将元素从原来位置拿走，后面的元素就会占据绝对定位元素的位置。如同排队一样，前面的人走了，后面的人就会前进占去离开的人的位置。

        相对定位与绝对定位相反，它移动后原本所占的空间仍保留。可理解为它进行定位后，之前的位置后面的元素不可占据。如同私人车库停车一样，车子离开后，别的车不可以停在那个车库。

                实现思路：margin负值配合百分比 ；margin 负间距原理

            使用margin属性的负间距实现具有width属性和height属性的绝对定位元素的居中          

          position: absolute; 

            left: 50%;   /* 定位元素盒的宽度的一半 */

            top: 50%;  /* 定位元素盒的高度的一半 */

            margin-left: -100px;    /* -定位元素本身的宽度的一半 */

            margin-top: -100px;   /* -定位元素本身的高度一半 */

        实现思路：left,right,top,bottom并用，配合margin：auto;

        如果元素的四个边的位置是使用“top”、“right”、“bottom”和“left”来描述的，那么元素的“height”和“width”将隐式地由偏移量决定。

         使用margin：auto；实现具有width属性和height属性的绝对定位元素的居中

        注意：定位并不是一种用来做主要页面布局的方式，主要用于管理和微调页面中的一个特殊项的位置。

        1、float: left|right;

                脱离了文档流，不脱离文本流，半脱离

        2、position: absolute|fixed;

                脱离了文档流，脱离文本流，全脱离。

                1.绝对定位和固定定位脱离正常标准流脱离文本流 全脱

                2.浮动只脱离正常标准流不脱离文本流

                3.都可以使行级标签支持宽高

                4.元素设置绝对固定浮动之后，就不在区分标签类型了，类似于行内块标签

        脱离文档流只是对html文档的一种解析方案的说法。脱离文档流是相对正常文档流而言的。

        正常文档流就是我们没有用css样式去控制的html文档结构，写的界面的顺序就是网页展示的顺序。比如写了3个div块。正常文档流就是依次显示这3个div块。从左往右，自上而下的顺序。

        脱离文档流就是指它所显示的位置和文档代码就不一定一致了。比如可以用css控制，把最后一个div块显示在第一个div块的地方。只是浏览器的处理方案。

        dom结构是没有发生变化的。和html文档一样。用js取这个节点可以取到的