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

前言

如果有一个人想要学前端，那么一定会让他先学习‘前端三剑客’——Html,CSS,JS，其中CSS就像装修师，把我们页面弄得五彩斑斓，当然这也需要我们花费时间去写各种的样式。随着时代发展，各种各样的UI,CSS库层出不穷，在我们实际开发时已经很少专门去写CSS了，一些属性也会在开发中慢慢遗忘，但面试还是会涉及到的，下面我们详解一下position属性。

定义

position——定位属性，可以规定元素的类型。日常开发中，我们会经常看到这个属性，比如：我们想要一个元素固定在页面的某一个位置，我们可以用posotion设置fixed。postion值的类型有6种，最重要的就是absolute跟sticky，我们一个个来看。

static

static——position的默认值。也就是说我们对该元素没有进行定位，元素就在页面本来的位置。

* {
        margin: 0 auto;
      }
      #box {
        width:200px;
        height:200px;
        background:orange;
        display:flex;
        justify-content:center;
        align-items:center;
      }
      .position{
        width:50px;
        height:50px;
        background:white;
        position:static
      }

   <div id="box">
      <div class='position'>
      定位
      </div>
    </div>

微信图片_20221122183324.png

relative

relative——相对定位，设置相对定位后，我们可以设置left、right、top、bottom属性将元素进行偏移，从名字中我们可以猜出这个偏移是相对于元素自身的原本的位置，而且偏移过后不会影响其他元素的布局，也就是所谓的无侵入性，相对定位还会对abolute产生影响，下面也会提及这一点。

  .item{
        width:50px;
        height:50px;
        background:red;
      }
    .position{
        width:50px;
        height:50px;
        background:white;
        position:relative;
        /* 向右偏移80px */
        right:80px;
    
      }

从图可知，红色元素的位置并没有发生变化，没有出现白色挤兑红色的情况。

absolute

absolute——绝对定位，设置绝对定位后，它也能设置left等，但此时定位的对象就变了，它会根据离它最近的relative进行定位。所以absolute一般跟relative结合使用，这也是上面我提到的relative对absolute的影响。如果没有relative属性的元素，会根据body进行定位。

    .position{
        width:50px;
        height:50px;
        background:red;
        position:absolute;
        right:80px;
    
      }

根据body进行定位

    #box {
        width:200px;
        height:200px;
        background:orange;
        display:flex;
        justify-content:center;
        align-items:center;
        position:relative
      }

id为box的元素设置relative，定位对象变成box元素

fixed

fixed——固定定位，这个我们经常碰到，比如，我们浏览商品，往下划着划着就会出现到顶部的按钮，这个就能利用fixed进行实现。它是根据浏览器窗口进行定位。

 /* 相对浏览器窗口定位的固定定位 */
    .position{
        width:50px;
        height:50px;
        background:red;
        position:fixed;
        right:10px;
    
      }

inherit

inherit——继承。这个大家都不陌生，从父元素继承position属性。我们将父元素设置为fixed，子元素设置inherit，那么子元素也相当于是固定定位。

  #box {
        width:200px;
        height:200px;
        background:orange;
        display:flex;
        justify-content:center;
        align-items:center;
        position:fixed;
        right:50px
      }
       .position{
        width:50px;
        height:50px;
        background:red;
        position:inherit;
        right:10px;
    
      }

sticky

sticky——粘性定位，相比前几个，这个理解起来相对于难一点，简单来说，它是relative与fixed两个属性值的结合体，当元素位置在一定范围内会表现为relative，一旦超过就会表现为fixed。具体我们可以想象一下距离顶部有距离的头部导航栏，刚开始会随着滚动条滚动一下，当滚动到顶部时便不再滚动，就具体在顶部。这个在我们开发中也是非常使用的。需要注意的是，必须设置left、right、top、bottom其中至少一个值才生效，粘性定位也在父元素内有效果。

    .content{
        margin-top:30px;
        width:200px;
        height:800px;
        background:red;
      }
      .position{
        width:200px;
        height:50px;
        background:white;
        position:sticky;
        top:10px
     }

总结

以上就是对于css中position的详解，肚里有粮心不慌，如果面试时候碰到这个问题，详解一番甚至简单手写一个案例会加深面试官的影响！

CSS详解——position

前言

定义