position的五个属性及特殊情况

position的五个属性及特殊情况:

static

• 默认值，没有定位，出现在正常的文档流中，忽略top，left，right，bottom，z-index的声明，也就是如果同时设置top,margin-top,那么只有margin-top起作用

relative 常用

• 相对定位，通过top,left,right,bottom的设置，相当于正常位置定位，可根据z-index进行层次分级,也就是如果同时设置top,margin-top那么都起作用

absolute 常用

• 绝对定位，脱离文档流，相对于static定位以外的第一个父元素定位，元素的位置可通过top,left,right,bottom设置，可根据z-index进行层次分级,也就是如果同时设置top,margin-top那么都起作用

fixed

• 固定定位，相对于浏览器窗口进行定位，元素的位置可通过top,left,right,bottom设置，可根据z-index进行层次分级,也就是如果同时设置top,margin-top那么都起作用

sticky: 黏性定位

结合了相对定位(relative) 和 固定定位(fixed) 两种定位功能于一体的特殊定位，适用于一些特殊场景,如果同时设置top,margin-top，分情况而定，下面有例子详解

position:sticky的生效是有一定的限制的，总结如下：

1. 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

   • 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。

2. 设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible，否则position:sticky不会生效。这里需要解释一下：

   • 如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以 position:sticky元素也不会有滚动然后固定的情况。

   • 如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。

3. 达到设定的阀值，就为固定定位(fixed),否则是相对定位(relative)。也就是设定了position:sticky的元素表现为relative还是fixed是根据元素是否达到设定了的阈值决定的。

使用:

• 当item元素滚动到距离窗口top为60px时固定、

    <div class="container">
        <div class="item"></div>
    </div>

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            position: relative;
            top: 50px;
            width: 500px;
            height: 10000px;
            border: 1px dashed;
        }
        .item {
            position: sticky;
            top: 60px; // 一开始是relative，这里是相对于文档定位，而不是父元素, 随着滚动条滚动，当到达该阀值时，就相对于窗口定位
            left: 50px;
            width: 200px;
            margin-top: 30px; // 注意点，没有滚动时，如果同时设置top和margin-top，那么谁比较大就取谁的值
            height: 20px;
            background-color: aqua;
        }
    </style>

这儿要注意一点，当父元素container也设置了top值，那么item的top在这也是相对于文档定位，但是当item的top值小于父元素container的top时，它相对于父元素的top相当于0，当同时设置了margin-top时，如果没有发生滚动，那么margin-top 与 (item的top - 父元素container的top）比较，谁大谁就取作用,在这儿maigin-top = 30, item.top - container.top = 10, 所以item距离父元素30px，如果差值比较大，那么距离父元素就取差值，当发生滚动后，那么就是item的top取作用、

过程: 一开始是relative，这里是相对于文档定位, 随着滚动条滚动, item会跟着移动，当到达该阀值时，就相对于窗口固定定位(fixed)。