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

news2025/2/26 3:03: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>