前端 CSS 绝对定位问题和粘性定位介绍

目录

1，绝对定位问题1，绝对定位元素的特性2，初始包含块问题

2，粘性定位注意点：

1，绝对定位问题

1，绝对定位元素的特性

display 默认为 block。所以行内元素设置绝对定位后可直接设置宽高。脱离文档流，所以 margin: auto 失效。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于 ICB（initial containing block，初始包含块）。

2，初始包含块问题

如果参考系是初始包含块，则

设置 top 时，参考点是页面顶部，而不是浏览器首屏顶部。

设置 bottom 时，参考点是浏览器首屏的底部，而不是页面的底部。

所以有这么一道经典面试题，大家品一下：

2，粘性定位

一句话总结：可以认为是相对定位和固定定位的混合，定位元素在滚动到某个阈值之前表现为相对定位，之后表现为固定定位。

先看下实际应用：

实现起来也比较简单，只需要给粘性定位元素一个 top 值即可。当定位元素距离浏览器视口顶部到达 top 值后，就表现为固定定位。

举例：

注意点：

至少得指定 top, right, bottom,left 其中之一，才可使粘性定位生效。否则其行为与相对定位相同。和其他定位一样，top 优先级大于 bottom，left 优先级大于 right粘性定位元素的包含块，设置 overflow: hidden; 会使粘性定位失效。

以上面的例子来说，下面的写法就会使粘性定位失效。

以上。

推荐文章