CSS四种定位介绍——相对定位、绝对定位、固定定位、粘性定位

一、相对定位

   1. 如何设置相对定位?

      (1) 给元素设置 position:relative 即可实现相对定位。

      (2) 可以使用 left、right、top、 bottom 四个属性调整位置。

   2. 相对定位的参考点?

        相对自己原来的位置

   3. 相对定位的特点:

      (1) 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。

      (2) 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

        默认规则是:

          定位的元素会盖在普通元素之上。

          都发生定位的两个元素，后写的元素会盖在先写的元素之上。

      (3) top和 bottom 不能一起设置，left和 right 不能一起设置。如果同时写，left生效；top生效。

      (4) 相对定位的元素，也能继续浮动，但不推荐这样做。

      (5) 相对定位的元素，也能通过 margin 调整位置，但不推荐这样做。

注意:绝大多数情况下，相对定位，会与绝对定位配合使用。（子绝父相：子元素绝对定位，父元素相对定位）

二、、绝对定位

  1. 如何设置绝对定位?

     (1) 给元素设置 position:absolute即可实现绝对定位。

     (2) 可以使用 left、right、top、bottom 四个属性调整位置。

  2. 绝对定位的参考点?

      参考它的包含块。

        什么是包含块?

          (1) 对于没有脱离文档流的元素：包含块就是其父元素.

          (2) 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位，那包含块就是整个页面)。

  3. 绝对定位元素的特点:

(1) 脱离文档流，会对后面的兄弟元素、父元素有影响。

(2) left 不能和 right 一起设置， top 和 bottom 不能一起设置。

(3) 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。

(4) 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。

(5) 无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素。

  何为定位元素?--默认宽、高都被内容所撑开，且能自由设置宽高。

三、固定定位

    1. 如何设置为固定定位?

      (1) 给元素设置 position:fixed 即可实现固定定位。

      (2) 可以使用 left、right、top、bottom 四个属性调整位置

    2. 固定定位的参考点?

         参考它的视口

           什么是视口?

             对于 PC 浏览器来说，视口就是我们所看到的整个页面。

    3. 固定定位元素的特点

      (1) 脱离文档流，会对后面的兄弟元素、父元素有影响。

      (2) left 不能和 right 一起设置， top 和 bottom 不能一起设置。

      (3) 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。

      (4) 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。

      (5) 无论是什么元素(行内、行内块、块级)设置为固定定位之后，都变成了定位元素。

        例如：span虽然是行内元素，但变成定位元素后其宽高由内容撑开或可设置宽高。

四、粘性定位

   1. 如何设置为粘性定位?

    (1) 给元素设置 position:sticky 即可实现粘性定位。

    (2) 可以使用 left、right、top、 bottom 四个属性调整位置，不过最常用的是 top 值。

   2. 粘性定位的参考点?

    离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先（如给元素加了overflow:scroll，内容高度和视口高度一样，此时不会出现滚动条即不可滚动，但是会出现滚动条窗口）。

   3. 粘性定位元素的特点

    (1) 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。

    (2) 最常用的值是 top：0值，到达视口顶端时被固定。

    (3) 粘性定位和浮动可以同时设置，但不推荐这样做。

    (4) 粘性定位的元素，也能通过 margin调整位置，但不推荐这样做。

  注意：粘性定位和相对定位的特点基本一致，不同的是:粘性定位可以在元素到达某个位置时将其固定。

定位层级

    1.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

    2.如果位置发生重叠，默认情况是:后面的元素，会显示在前面元素之上。

    3.可以通过 css 属性 z-index 调整元素的显示层级。

    4.z-index 的属性值是数字，没有单位，值越大显示层级越高。

    5.只有定位的元素设置 z-index 才有效。

    6.如果 z-1ndex 值大的元素，没有覆盖掉 z-index 值小的元素，请检查其包含块的层级。