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的生效是有一定的限制的，总结如下：
-
须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
- 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。
-
设定为position:sticky元素的任意父节点的 overflow 属性必须是 visible，否则position:sticky不会生效。这里需要解释一下：
-
如果position:sticky元素的任意父节点定位设置为overflow:hidden，则父容器无法进行滚动，所以 position:sticky元素也不会有滚动然后固定的情况。
-
如果position:sticky元素的任意父节点定位设置为position:relative | absolute | fixed，则元素相对父元素进行定位，而不会相对 viewprot 定位。
-
-
达到设定的阀值，就为绝对定位(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)。
网友评论