定位属性

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

position属性(定位属性)

定位又分为静态定位、绝对定位、相对定位、固定定位、粘性定位。

              static      默认静态 (当我们没有给元素设置定位时，他就是默认的静态定位)
              
              absolute   绝对定位   
                  参照物：要已经有定位的但不包括静态定位的父元素为参照物，如果所有
                  的父元素都没有定位或者没有父元素的情况下，参照物为当前文档

                  特性：破坏文本流，不占据空间
                  
              relative  相对定位
                  参照物：以自身为参照物

                  特性：不破坏文档流，占据空间、
                  
              fixed   固定定位 (这种定位一般用于网页上的一些固定的某个位置的一块区域)
                  参照物：浏览器

                  特性：不破坏文档流，不占据空间

              sticky 粘性定位
              (让原本不在网页边缘的块，在滚动时碰到边缘停下来，其他没有粘性的元素继续滚动)

定位之间的层级关系

              1.按照先后顺序显示，后写的在上面
              2.z-index  比较数字大小，数字越大的就在上面，最好不要使用负数

包含块的设置

             将父元素设置为position：relative
             将子元素设置为position：absolute

让子元素在浏览器窗口中上下左右居中

            使用position：fixed固定定位
            第一种方法：
            position:fixed;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;

            第二(已知元素的大小（宽高）)
            position:fixed;
            left:50%;
            top:50%;
            margin-left:-元素宽度的一半
            margin-top:-元素高度的一半

让子元素在父元素中上下左右居中

            父元素添加position：relative
            子元素添加position：absolute
                     left:0;
                     right:0;
                     top:0;
                     bottom:0;
                     margin:auto;

超宽banner处理

            先找到父元素的中线，将子元素定位到中线，再将子元素的margin-left设置为
            -(负的)子元素宽度的一半

扩展知识

     1.transition 过渡属性
               all：全部属性或者选择一个属性来进行过渡
               1S：过渡所需要的时间
               1S：延迟时间
               linear  匀速
     2.opcticy    透明度属性
               0--透明
               0.5--半透明
               1--不透明