2020.11.27

                                                                                              元素的定位属性

                           元素的定位属性主要包括定位模式和边偏移。

                      如果边偏移没写，就是指它的边偏移为0.

                   1.静态定位（static）是元素的文档流的位置状态。

                   2.相对定位（relative）：1.原位置保留

                                                             2.它的边偏移是以原位置参考的。

                   3.绝对定位（absolute）：父辈有定位，依据最近的已定位的父元素进行定位，如果父元素都没有定位，则以boby（浏览器）进行定位。绝对定位后，元素的原位置不保留。

                   4.固定定位（fixed）：是特殊的固定定位，是以浏览器窗口为参考。

           

             默认的页面堆积为0，当元素设置定位后，其堆积均为正直（浮在空中），正直越大；空间上越靠上。

            在网页设计中，用到绝对定位时，往往是子绝父相。

1. static 静态定位:
   static 静态定位是position的默认值,默认文本流的状态，不会识别left right top bottom值指定的坐标。

2. absolute 绝对定位：
   a : 参照物：按照已经有定位的父元素进行位置的变化。
   b : 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。
   c : 绝对定位，脱离文档流、不占据空间。
   d : 可以识别left right top bottom值指定的坐标。

3. relative 相对定位：
   a : 参照物：自身默认的位置。
   b : 始终占据空间，不会破坏文档流。
   c : 可以识别left right top bottom值指定的坐标。

4. fixed 固定定位：
   a : 参照物：浏览器窗口。
   b : 脱离整个文本流。不占据空间。
   c : 可以识别left right top bottom值指定的坐标。

5. sticky 粘性定位：
   position:relative 和 position:fixed的结合。
   如果页面没超出窗口范围，按照relative 执行，
   如果内容超出窗口位置，按照fixed执行。
   可以识别left right top bottom值指定的坐标。

定位元素:后定位的元素会把前面定位的盖住。
z-index:
控制定位元素的层次关系
属性值为一个数字（可以为负数），数字越大，层次关系越高
默认值 auto;
在页面的搭建中经常用到包含块的设置：
1：如果父元素为参照物：添加 position:relative;
2: 给要做定位的子元素：添加 position:absolute;

运用定位可以很方便的让元素到想要到的地方。
居中的方法：
让内容在浏览器窗口左右上下居中。
第一种方法:
position:fixed;
left:50%;
top:50%;
margin:-高度的一半 0 0 -宽度的一半。

    第二种方法：
        position:fixed;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;

利用定位:让子元素在父元素里面左右上下居中
     /* 左右上下的居中 */
    position:absolute;
    left:0;right:0;
    top:0;bottom:0;
    margin:auto;