当前位置：首页 > news >正文

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

news 2025/8/27 23:53:49

1，绝对定位问题

1，绝对定位元素的特性

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

2，初始包含块问题

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

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

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

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

在这里插入图片描述

2，粘性定位

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

先看下实际应用：

在这里插入图片描述

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

举例：

<head><style>* {margin: 0;padding: 0;}.header {height: 200px;background-color: seagreen;}.sticky {position: sticky;top: 20px;width: 50px;height: 50px;background-color: salmon;}.content {height: 800px;background-image: linear-gradient(#e66465, #9198e5);}</style>
</head>
<body><div class="header">顶部其他元素</div><div class="sticky"></div><div class="content"></div>
</body>

在这里插入图片描述

注意点：

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

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

<head><style>.box {position: relative;overflow: hidden;}</style>
</head>
<body><div class="box"><div class="header">顶部其他元素</div><div class="sticky">one</div><div class="content"></div></div>
</body>