你真的了解position吗？前几天在牛客看见了一个面试题 “position几种属性，以及应用场景”。然后就来详细的了

前几天在牛客看见了一个面试题 “position几种属性，以及应用场景”。然后就来详细的了解了一下position属性。

position简单介绍

CSS position 属性用于指定一个元素在文档中的定位方式。分为相对定位(relative)，绝对定位(absolute, fixed)，粘性定位(sticky)。并且定位元素都可以设置四个方向(top, left, right, bottom)的值，来满足你的定位需求。

下面就来看看position的用法吧。

position的属性值

static

他是position的默认值。
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

     <style>
        * {
          padding: 0;
          margin: 0;
        }

        p {
          position: static;
          left: 100px;
        }
      </style>

    <body>
      <div>
        <p>p标签</p>
      </div>
    </body>

relative

相对定位，通过top, bottom, right, left移动元素时，原来的位置依旧被保留。

      <style>
        * {
          padding: 0;
          margin: 0;
        }

        p {
          display: inline;
          position: relative;
          left: -20px;
          background: red;
        }

        span {
          background: blue;
          /* width: 100px; */

        }
      </style>

    <body>
      <div>
        <p>p标签</p>
        <span>span标签</span>
      </div>
    </body>

position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
如果没有定位偏移量，对元素本身没有任何影响。
left, top, right, bottom是相对当前元素自身进行偏移的。

absolute

绝对定位，如果设置了定位偏移量，元素会被移出正常文档流，并不为元素预留空间。完全脱离文档流。
使内联元素支持宽高,即让内联元素具备块的特性。

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    span {
      width: 400px;
      position: absolute;
      left: 20px;
      top: 20px;
      background: red;
      height: 200px;
    }
  </style>

    <body>
      <div>
        <span>span标签</span>
      </div>
    </body>

使块元素默认宽根据内容决定(让块具备内联的特性)。

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      height: 1000px;
    }

    p {
      position: absolute;
      background: red;
      top: 20px;
      left: 20px;
    }
    main {
      background: blue;
    }
  </style>

    <body>
      <div>
        <p>p标签,绝对定位元素</p>
        <main>main标签， 非定位元素</main>
      </div>
    </body>

他的偏移量是相对于最近的非 static 定位祖先元素的偏移。如果没有定位祖先元素，那么就相对于整个文档。所以一般元素布局都会使用子绝父相。
绝对定位的元素可以设置外边距，且不会与其他边距合并。这一点是BFC规范中的。

fixed

绝对定位，如果设置了定位偏移量，元素会被移出正常文档流，并不为元素预留空间。
但是他的偏移量是相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
使内联元素支持宽高,即让内联元素具备块的特性。
使块元素默认宽根据内容决定(让块具备内联的特性)。
fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先。元素的位置在屏幕滚动时会改变。因为他是相对父元素定位的。

      <style>
        * {
          padding: 0;
          margin: 0;
        }

        div {
          margin: 200px;
          background: blue;
          width: 200px;
          height: 200px;
          transform: rotate(20deg);
        }

        p {
          position: fixed;
          background: red;
          top: 20px;
          left: 20px;
        }
      </style>

    <body>
      <div>
        <p>p标签</p>
      </div>
    </body>

从上面可以看出，它相对的是父元素定位的。并且会跟随滚动条的移动的移动。

sticky

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值(就是指定的偏移量)前为相对定位，之后为固定定位。
如果未设置定位阀值，那么他的行为与相对定位相同。
元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先，包括table-related元素，基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。如果最近块级元素不可滚动，那么他设置的偏移量将不会生效。

      <style>
        * {
          padding: 0;
          margin: 0;
        }

        body {
          height: 1000px;
        }

        p {
          position: -webkit-sticky;
          position: sticky;
          background: red;
          top: 20px;
        }
      </style>


    <body>
      <div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <div>ssss</div>
        <p>p标签</p>
      </div>

    </body>

从上面可以看出，当滚动位置距离该元素20px时，那么他将继续随滚动条滚动。

去掉外层包裹的div。从上面可以看出，当滚动位置距离该元素20px时，那么他将被固定到当前位置，不随滚动条滚动。

该值总是创建一个新的层叠上下文。注意，一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上。当该祖先的overflow 是 hidden, scroll, auto, 或 overlay时，抑制了任何“sticky”行为。

z-index

z-index 属性设定了一个 定位元素(即其 position 属性值不是 static) 及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。