CSS定位

  定位是CSS中重要的概念之一，可能很多小伙伴刚学习Web前端对定位不太理解，那么接下来给大家分享总结 CSS中的 "定位"。

什么是定位 (position)：

      在我们CSS中：定位是CSS中一种更加高级的布局手段，我们可以通过定位来让一个元素摆放到页面的任意一个位置，绝对定位 relative 和 相对定位 absolute非常容易混淆，此篇文章着重来总结 relative 和 absolute。

position 取值：

   static |  relative | sticky | absolute | fixed

      (static是position定位的初始值)。

 

定位分类：

      CSS中的定位分两种

一. 相对定位：

      * (相对定位就是自身在文档流中位置进行计算，就是元素在文档中初始的位置)

      绝对定位特点：      

                 1. 开启定位后不设置偏移量  元素不会发生任何变化。

                 2. 相对定位是参照元素在文档流中得位置来定位得（相对于刚才位置移动）。

                 3. 相对定位会提升元素的层级（提升等级会覆盖没有开定位得元素）

                 4. 相对定位不会脱离文档流

                 5. 相对定位不会改变元素得性质：块还是块，行内还是行内

                 6.相对定位不会脱离文档流

                 7.relative 的宽度会把父元素撑大（因为未脱离文档流）。

例：

      1. 这是两个盒子原始的位置

 现在我们来给box2设置相对定位relative 偏移量：

        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            font-size: 20px;
            margin-top: 20px;

            position: relative;   //开启相对定位  
            left: 100px;          //设置偏移量left:100px box2向右移动100个像素
        }

       2. 给box2设置完position偏移量后：

 (以上我们可以看出box2是从原始的位置开始移动到新的位置，虽然box2向右移动，但是原位置还在占位)。

3.下面我们再来看box再次向下移动之后：

        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
            font-size: 20px;
            margin-top: 20px;

            position: relative;     //开启相对定位 
            left: 100px;

            top: 100px;             //向右再移动100px

        }

       我们可以看到box2从第一次移动的原位置开始向下移动100p

以上就是相对定位。

 

 

2.相对定位absolute：

    相对定位是根据容纳块进行定位的（也可以说成是离它最近已定位的祖先父级元素进行定位）。

    相对定位和区别就在于 absolute已经脱离了文档流，元素无论生成什么类型的框体，绝对定位生成后都是块级框。

   特点：

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

                  2.开启绝定位会，元素会被文档流中脱离

                  3.决定定位会改变元素得性质，行变成块，块宽高被内容撑开

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

                  5.绝对定位是相对于包含块进行定位的。

                  6.绝对定位宽度不会影响到父元素，设置偏移量之后原来的位置是空的。

                  7.absolute 如果没有祖先元素，那么就会根据根元素html来进行定位。

例：

.box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
      }


 .box2 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

设置两个元素：

我们给box2开启绝对定位 absolute:

       .box1{
           width: 100px;
           height: 100px;
           background-color: #bfa;
           position: absolute;    //给box1设置偏移量
       }

我们给box1设置完发偏移量之后，这时候box1脱离了文档流（已经不占据原位置），此时的box2会自动上移，覆盖掉box1。