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

目录

  • 1,绝对定位问题
    • 1,绝对定位元素的特性
    • 2,初始包含块问题
  • 2,粘性定位
    • 注意点:

1,绝对定位问题

1,绝对定位元素的特性

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

2,初始包含块问题

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

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

CSS 绝对定位问题和粘性定位介绍_第1张图片

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

CSS 绝对定位问题和粘性定位介绍_第2张图片

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

CSS 绝对定位问题和粘性定位介绍_第3张图片

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>

CSS 绝对定位问题和粘性定位介绍_第4张图片

注意点:

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

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

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

以上。

你可能感兴趣的:(css,css,前端,绝对定位,粘性定位)