定位总结

大约 5 分钟

定位总结

CSS 中的定位

position属性用于指定一个元素在文档中的定位方式。top、right、bottom和left属性则决定了该元素的最终位置。

目前在 CSS 中，有 5 种定位方案，分别是：

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位

static 静态定位

所谓静态定位，就是我们的标准流。

在标准流里面，块级元素独占一行，内嵌元素共享一行。静态定位是 HTML 元素的默认值，静态定位的元素不会受到 top，bottom，left，right，z-index 的影响。

    <div class="box static">
        static定位（默认）
        <br>不会受top/left/right/bottom影响
      </div>

 .box {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 2px solid;
      }
      .static {
        position: static;
        background: #ffcccc;
        border-color: #ff9999;
      }

relative 相对定位

所谓相对定位，就是相对自己原来的位置进行定位。相对定位的最大特点就是不脱离标准流，相对于自己原来的位置上进行一定的偏移。

使用相对定位的作用主要有两个：

微调元素
做绝对定位的参考，子绝父相

    <div class="box relative">
        relative定位
    </div>

 .relative {
        position: relative;
        top: 20px;
        left: 20px;
        background: #ccffcc;
        border-color: #99ff99;
      }

absolute 绝对定位

   <div class="box absolute">
        absolute定位
        <br>相对于最近的定位祖先元素
      </div>

 .absolute {
        position: absolute;
        top: 50px;
        right: 50px;
        background: #ccceff;
        border-color: #9999ff;
      }

所谓绝对定位，就是相对于离自己最近的，并且定了位的元素进行偏移。使用了绝对定位后的盒子，会脱离标准流，如果设置了 margin 的值为 auto，则会失效。

绝对定位后的盒子，其 display 属性会变为 block

在浏览器中的浏览效果原本不能设置宽高的行内元素，在进行了绝对定位以后，display 属性变为了 block可以设置宽高了。

默认情况下，绝对定位的参考点，如果用 top 来进行描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角。

如果是使用 bottom 来进行描述，那么就是浏览器首屏窗口尺寸，对应的页面左下角。

前面我们在介绍相对定位的时候，有提到子绝父相这个名字。事实上，当我们对一个元素设置绝对定位的时候，往往会将它的父级元素设置为相对定位。

这样的好处在于该元素的父级元素没有脱离标准流，该元素将会以这个相对定位了的父元素作为参考点，在父元素的范围内进行移动，方便我们对元素的位置进行掌控。

需要记住的是当父级元素出现有定位时，绝对定位的参考点永远都是离自己最近的，并且定了位的祖先元素的左上角

fixed 固定定位

所谓固定定位，可以看作是一种特殊的绝对定位，所以自然而然固定定位也是会脱离标准流的。

固定定位的特点是相对于浏览器窗口进行定位的。

换句话说，对一个盒子进行固定定位以后，无论页面如何滚动，这个盒子的显示位置都是不会变化的。

固定定位在 PC 端中经常用于显示在页面中位置固定不变的页面 header，以及移动端中位置固定不变的 header 和 footer。

   <div class="box fixed">
        fixed定位
        <br>相对于浏览器窗口
      </div>

 .fixed {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #ffccff;
        border-color: #ff99ff;
      }

sticky 粘性定位

在 CSS3 中，新增了一种定位方式：sticky。

sticky，中文的字面意思是“粘，粘贴”的意思，所以这种定位方式可以称之为粘性定位。

目前大部分浏览器都已经支持了这种定位方式。

要设置一个元素的定位方式为粘性定位，首先需要将 position 属性设置为 sticky。

   <div class="box sticky">
        sticky定位
        <br>相对于浏览器窗口
      </div>

 .sticky {
        position: sticky;
        top: 20px;
        background: #ccffcc;
        border-color: #99ff99;
      }

接下来有如下几个需要注意的点：

父元素的 overflow 必须是 visible，不能是 hidden 或者 auto，因为父节点定位设置为 overflow:hidden 则父容器无法进行滚动。
父元素的高度不能低于 sticky 元素的高度。
如果父元素没有设置定位（position:relative | absolute | fixed），则相对于 viewprot 进行定位，否则以定位的父元素为参考点。
设置阀值：需要指定 top、right、bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。并且 top 和 bottom 同时设置时，top 生效的优先级高；left 和 right 同时设置时，left 的优先级高。

定位的层级关系

在 CSS 中，定位元素的层级关系，是根据 z-index 属性来决定的。

z-index 属性用于设置定位元素的层级关系，其值可以为正整数、负整数或 0，默认值为 0。

z-index 值越大，定位元素的层级越高，反之则越低。

总结

static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。
relative：相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。
absolute：相对定位的元素并未脱离文档流，而绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。
fixed：固定定位与绝对定位相似，但元素的包含块为 viewport 视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。
sticky：粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。