position定位总结

加油 今天活力满满

提示：以下是本篇文章正文内容，下面案例可供参考

一、谈谈我理解的定位

1定位的组成
static relative absoulte fixed
我的理解定位是有定位的方式+偏移量进行的
定位的方式有static 相对relative 绝对定位 (absoulte) 固定定位 (fixed)
偏移量：left right top bottom
2是否是标准流
相对relative 是以自身的位置进行方位移动的 是占有位置的标准流
绝对定位 (absoulte) 是以默认浏览器进行的移动，但是我们通常使用父级通过绝对定位 是脱标
fixed是规定定位只认浏览器，同样也是脱标的
z-index:在使用定位布局时，可能会出现盒子重叠的情况。使用

二、使用定位我们如何进行水平垂直居中的呢

1.我们实现视口居中

代码如下（示例）：

 .sun {
             width: 200px;
             height: 200px;
             background-color: pink;
             position: absolute;
             left: 50%;
             margin-left: -100px;
             bottom: 50%;
       }
 <div class="sun"></div>

2.子绝父相进行垂直水平居中

代码如下（示例）：

  .father {
           position: relative;
           width: 600px ;
           height: 600px;
           background-color: blue;
         
       }
       .son {
           position: absolute;
           left: 50%;
           width: 90px;
           height: 90px;
           background-color:pink;
           margin-left: -45px;
           bottom: 50%;
           <div class="father">
           <div class="son"></div>
       </div>
       }

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了定位position的使用，