【CSS 定位之 position 属性】

---

position 属性: 设置元素的 位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)

• ⑴ 设置元素的 位置/定位类型

  • position 属性 把元素放置到一个 静态的、相对的、绝对的、或固定的 位置中。
  • 搭配属性: 搭配以下 偏移量 属性,决定元素的 最终位置
    • ❶ top
    • ❷ right
    • ❸ bottom
    • ❹ left

---

• ⑵ 元素 定位的类型

  • ① 定位元素 (positioned element)
    • 计算后 位置position值 为 relative, absolute, fixed, sticky的元素。
    • 即,不是静态元素(非静态元素 = 非static元素) = position ≠ static的元素。
  • ② 相对定位 元素（relatively positioned element）
    • 计算后 position 值 = relative 的元素。
    • ❶ 垂直偏移量:
      • top、bottom 属性 指定相对于 ❶ 原位置(元素 自身位置)(normal position)的 垂直偏移量。
    • 水平偏移量:
      • left 、 right 属性 指定 相对于 原位置的 水平偏移量 (horizontal offset).
  • ③ 绝对定位 元素 (含 固定定位 元素) (absolutely positioned element): ❶ 绝对定位 和 ❷ 固定定位
    • 计算后 位置position值 = absolute 或 fixed的元素。
    • 偏移量
      • top, right, bottom, left 属性 指定 相对于 特定的包含块 的边缘的 偏移量。
        • 如果元素有 外边距(margin)，则将 外边距 添加到 偏移量中。
  • ④ 粘性定位 元素（stickily positioned element）
    • 计算后 位置 position 值 = sticky 的元素。
    • 它被视为 相对定位，直到 它的包含的块 超过指定的阈值/临界值 (比如 将top设置为auto以外的值)。
    • 此时 它被视为“被卡住(stuck)” = 粘在最近的 滚动的祖先元素上，直到遇到 它的包含块的 相反边缘 (只粘在一个边上,不会同时 粘在滚动元素的几个边上)。

---

• ⑶ 5 种定位的 区别和联系 (详情见 属性值介绍)

  • 偏移量: 由 top,right,bottom, left 决定。
  • 正常流: 正常的文档流。
  • 层叠上下文/层叠次序: z-index

定位名称	position 值	从文档流中删除	占据 文档流的空间	偏移量 是否有效	偏移量 相对的包含块
① 静态定位	position: static;	不会删除	占据,预留空间	无效,不偏移	无相对偏移。 正常流定位。
② 相对定位	position: relative;	不会删除	占据,预留空间	有效,会偏移	相对 元素自身位置 偏移 。 正常流定位。
③ 绝对定位	position: absolute;	会删除	不占据,不预留空间	有效,会偏移	相对 ❶ 最近的+ 定位(非静态)祖先 或 ❷ 根元素的包含块。 非正常流定位。
④ 固定定位	position: fixed;	会删除	不占据,不预留空间	有效,会偏移	相对 ❶ viewport 视口(视窗)。 ❷ 若 一个祖先 将transform, perspective, filter属性 设置为非none的值 ， 在这种情况下，相对于 该祖先 (该祖先将 作为包含块)。 非正常流 定位。
⑤ 粘性定位	position: sticky;	不会删除	占据,预留空间	有效,会偏移	相对 最近的+ ❶ 滚动祖先(有滚动机制,不一定滚动)。 滚动机制: overflow 值 = hidden, scroll, auto, overlay时 创建。 正常流定位。

---

• ⑷ 绝对定位元素 和 宽高 / 可用空间

  • ① 根据内容 调整尺寸
    • 绝对定位元素的 height 和 width 被设定为 auto，就能按照 内容大小 调整尺寸。
  • ② 垂直偏移量 和 填充 可用垂直空间
    • 被绝对定位的元素 可以通过指定 top 和 bottom，保留 height 未指定（即为默认值 auto），来填充 可用的垂直空间。
  • ③ 水平偏移量 和 填充 可用水平空间
    • 可以通过指定 left 和 right 并将 width 指定为 auto来 填充 可用的水平空间。

---

• ⑸ 偏移量的 优先级

  • ① 垂直偏移量 top 优先:
    • 如果 top 和 bottom 都被指定（严格来说，这里指定的值不能为auto），top 优先。
  • ② 水平偏移量: 偏向 起始方向 (根据书写方向 direction)
    • ❶ 从左到右, left优先
      • 如果指定了 left 和right ，当 direction 设置为 ltr（水平书写的中文、英语）时 left优先。
    • ❷ 从右到左,right优先
      • 当 direction设置为rtl（阿拉伯语、希伯来语、波斯语由右向左书写）时 right优先。

---

• ⑹ 位置/定位的 语法

  • position: static | relative | absolute | sticky | fixed;

---

• ⑺ 位置/定位的 取值

  • 单个 关键字: position 属性 指定为 从下面的值列表中 选择的 单个关键字。

---

• ⑻ 位置/定位的 属性值

  • 静态/ 相对/ 绝对/ 固定/ 粘性

  • Ⅰ. 静态定位/正常流(默认值): static

    • ① 正常流: 元素 是根据文档的 正常流定位的。
    • ② 正常布局:
      • 该关键字 指定元素 使用 正常的布局行为，即元素 在文档 正常流中的 当前的布局位置。
    • ③ 无效属性(元素 不偏移):
      • 偏移量 属性,对 静态定位的元素 无效,不起作用。
      • 位置偏移量 无效,: 默认的 静态定位下, 此时 top,right, bottom, left和 z-index 属性值 都无效,不会发生偏移,指定层叠次序 也不起作用。

  • Ⅱ. 相对定位: relative

    • 生成 相对定位的元素。
    • ① 正常流: 元素 根据 文档的正常流 定位。
      • 相对于 元素 ❶ 本身的 正常位置 (元素 在文档流中的位置) 进行定位。
    • ② 偏移量: 相对于 ❶ 自身位置。
      • top, right, bottom, left的值 相对于自身的 偏移量。
    • ③ 布局空间:
      • 偏移量不影响: 任何 其他元素的 位置。
      • 所以，页面布局中 为元素提供的空间 与 position: static 时 相同。
    • ④ 不适用对象:
      • 相对定位 position:relative; 对 表格分组/表行/表列/表单元格/表的标题 元素 无效( table-*-group, table-row, table-column, table-cell, table-caption) 。
    • ⑤ 不改变 页面布局
      • 相对定位元素, 先放置 在未添加定位时的 位置(正常流中 本身的位置)，再在不改变页面布局的前提下 调整元素位置（因此会在 此元素未添加定位时 所在位置 留下空白）。

  • Ⅲ. 绝对定位: absolute

    • 生成 绝对定位的元素。
    • ① 不预留空间:
      • 从文档流中删除: 元素将 从正常的文档流中 删除，并且在页面布局中 不为元素 创建空间。
    • ② 偏移量 相对于
      • ❶ 最近的+ 定位(非静态)祖先 或 ❷ 根元素的包含块:
        • 它的位置 相对于 ❶ 最近的+定位祖先(closest positioned ancestor) / 非静态position ≠ static的祖先，如果有的话;
          • 定位元素(非静态static元素) 偏移 ⇒ 定位元素的子元素(包括绝对定位元素 absolute) 也会 跟随着一起偏移。
        • 否则，它将相对于 ❷ 初始包含块(initial containing block) = 文档 根元素的包含块 放置。
      • 最终位置: 最终位置由 top, right, bottom, left 偏移量的值 决定。
    • ③ 层叠次序
      • 当 z-index 的值 不是 auto 时，他的值 创建了一个 新的 层叠上下文(stacking context)。
    • ④ 外边距不合并:
      • 绝对定位的元素 可以设置外边距（margin），且不会 与其他外边距合并。

  • Ⅳ. 固定定位: fixed

    • 生成 绝对定位的元素。
    • ① 不预留空间
      • 从正常流中删除: 和absolute一样,将元素 从正常的文档流中 删除，并且 在页面布局中 不为元素 创建空间。
    • ② 偏移量 相对于
      • ❶ 视窗: 它的位置 相对于 视口(浏览器窗口) 建立的 初始包含块。
        • 通过 指定元素 相对于 屏幕视口（viewport）的位置 来指定 元素位置。
      • ❷ 更换包含块 为某祖先元素:
        • 除非 其中一个祖先 将transform, perspective, filter属性 设置为非none的值 ，在这种情况下，该祖先 将作为包含块。
      • ❸ 最终位置: 由 偏移量 top,right,bottom, left 决定。
    • ③ 位置固定:
      • 元素的位置 在屏幕滚动时 不会改变。
      • 打印时，元素 会出现在 每页的 固定位置。
    • ④ 层叠次序:
      • fixed 属性 会创建 新的层叠上下文。

  • Ⅴ. 粘性定位: sticky

    • ① 正常流: 元素是 根据 文档的正常流 定位的。
    • ② 偏移量 相对于
      • 最近的+ ❶ 滚动祖先(scrolling ancestor) 和 包含块 (最近的 块级祖先),包括 表格table相关元素。
      • 最终位置: 由 偏移量 top,right,bottom, left 决定。
      • 偏移量: 不影响 任何其他元素的位置。
    • ③ 层叠次序
      • 这个值 总是创建 一个 新的 层叠上下文。
    • ④ 滚动机制的 祖先
      • 粘性元素, “粘”在其 最近的 + ❶ 拥有“滚动机制(scrolling mechanism)”的祖先,即使 那个祖先 不是最近的 真正的 会滚动祖先。这有效地抑制了 任何“粘性”行为。
      • 滚动机制: overflow 值 = hidden, scroll, auto, overlay时 创建。

• 查看 包含块的 详细信息: containing-block-details of visual formatting model details

---

• ⑼ 位置/定位的 浏览器支持

  • ① 绝对定 位和 边框合并
    • 在Firefox 57之前，当将绝对定位 应用到 具有 边框合并的表 中的元素时，它不能正确地工作。
  • ② 在Firefox 44之前，position: fixed 在大多数情况下 都没有创建一个 层叠上下文(层叠次序)。
  • ③ 在Firefox 30之前，不支持对 表行和行组 的绝对定位。
  • ④ Safari 需要浏览器前缀 -webkit-
  • ⑤ 在Internet Explorer中，如果文档处于“怪异quirks”模式，固定定位 将不起作用。
  • 

---

• ⑽ 5 种定位的 示例

• 示例1: 对 元素,进行 相对定位

  • 相对定位的元素 是在文档中的正常位置 偏移给定的值，不影响其他元素的位置。
  • 相对定位 relative = 不脱离 文档流 = 保留在 文档流中 = 仍然 占据原本的位置 = 原本的位置 不会被别的元素 占据

• css (适用于 以下的几个示例)

/*去除 各浏览器的 默认内外边距*/
*{
    margin: 0;
    padding: 0;
}
.position {
    /* 设置宽高 */
    width: 130px;
    height: 100px;
    text-align: center;
    /*文字垂直居中: line-height = height*/
    line-height: 100px;
    /*让块元素 排成一行,默认是从上到下 一列*/
    display: inline-block;


}

.red {
    background-color: indianred;
}

.green {
    background-color: lightseagreen;
}

• html (适用于 以下的几个示例)

<div class="posiancestor">
   <p class="position red">古人学问无遗力，</p>
   <p class="position green relative">少壮工夫老始成。</p>
   <p class="position red fixed" >纸上得来终觉浅，</p>
   <p class="position green relative2">绝知此事要躬行。</p>
</div>

• ① 原图
  • 

---

.relative {
    position: relative;
    /* 设置偏移量*/
    top: 50px;
    left: 50px;
}

• ② 第2个元素 设置 相对定位后 (代码如上)
  • 其他元素的位置 不动,偏移量 可能会导致 其他元素 被覆盖。
  • 
• ③ 第2,4 个元素, 设置 相对定位后
  • 其他元素的位置,仍然保持不变,只有相对定位的元素,位置发生了改变。
  • 

---

• 示例2: 对元素 进行绝对定位
  • 绝对定位absolute = 脱离 文档流 = 从文档流中删除 = 不占据 原本的位置 = 原本的位置 可能会被别的元素 占据
    • 相对定位的元素 并未脱离文档流，保留在 文档的正常流中, 而绝对定位的元素则 脱离了文档流,被从流中取出;。
  • 不占空间: 在布置文档流中 其它元素时，绝对定位元素 不占据空间。
    • 其他元素被定位时, 好像绝对定位元素 不存在一样,因为被从流中 删除了。
    • 位置被占: 绝对定位元素,在文档流中 原本的位置,会被 其他元素 占据。
  • 相对于
    • 绝对定位元素 相对于 ❶ 最近的 + 非 static /定位的 祖先元素 定位。
    • 当这样的祖先元素 不存在时，则 相对于ICB（inital container block, ❷ 初始包含块 = 文档 根元素的包含块）。

---

.relative {
    /*设置 绝对定位类型*/
    position: relative;
    position: absolute;
    /*设置偏移量*/

    top: 50px;
    left: 50px;
}

• ① 给第2个元素,进行绝对定位(代码如上)
  • 相对于: 该元素, 没有设置 定位祖先时的绝对定位 = 相对于 根元素的包含块
  • 不占空间: 该绝对定位的元素 在文档流中,不占据空间了,原本的位置,也被后面的元素 占了。
  • 
  • 
  • 

---

.relative2{
    /*设置 绝对定位类型*/
    position: absolute;
    top: 10px;
    left: 10px;
}

• ② 对第 4 个元素,进行绝对定位(代码如上)
  • 根据 偏移量 会覆盖在 被绝对定位的 第2个元素上方。
    • 相邻元素的 绝对定位 层叠次序: 默认按照 原本在 文档流中的 先后次序
  • 
  • 

---

/*设置一个 定位的祖先*/
.posiancestor{
    position: relative;
    top: 50px;
    left: 50px;
}

• ③ 给 绝对定位元素的设置一个 定位祖先(非静态祖先)(代码如上)
  • 定位元素 偏移 ⇒ 定位元素的 子元素(包括 绝对定位元素 absolute) 也会 跟随着一起偏移。
    • 给 某一个祖先元素,比如 父元素,设置成定位元素(非静态元素),比如 相对定位元素
  • 可以看到父元素 相对自身位置 进行偏移后,它的子元素 (包括 绝对定位元素 absolute) ,也全部都偏移了。
  • 

---

• 示例3:给 第3个 元素设置 固定定位
  • ① 偏移量 相对于:
    • 固定定位 与绝对定位相似，但偏移量 相对于 元素的包含块 = ❶ viewport 视口(视窗)。
  • ② 固定定位 = 滚动时 不动的元素:
    • 该定位方式 常用于 创建在滚动屏幕时 仍固定在相同位置的元素。
    • 
  • ③ 祖先元素的定位, 不影响 固定元素fixed的位置,只影响absolute的定位
    • 固定定位的元素,祖先元素(比如父元素) 设置的定位,偏移量,对 固定元素 不造成影响,不起作用。代码和图如下:
    • 

/*设置一个 定位的祖先*/
.posiancestor{
    position: relative;
    top: 40px;
    left: 40px;
}

.fixed{
    /*设置 固定定位*/
    position: fixed;
    top: 50px;
    left: 50px;
    border: double 2px;
}

---

• 示例4: 给 元素设置 粘性定位

  • ① 正常流: 元素是 根据 文档的正常流 定位的。
  • ② 偏移量 相对于
    • 最近的+ ❶ 滚动祖先(scrolling ancestor) 和 包含块 (最近的 块级祖先),包括 表格table相关元素。
    • 最终位置: 由 偏移量 top,right,bottom, left 决定。
  • ③ 粘性定位: 可以被认为是 相对定位和 固定定位的混合。
  • ④ 特定阈值:
    • 元素在 跨越 特定阈值 前为相对定位，之后为 固定定位。
  • ⑤ 滚动和粘性:
    • 如果滚动元素 有粘性的 子元素(后代元素) ,滚动到 哪个粘性元素,哪个元素 就粘在 这个滚动元素上。
  • ⑥ 粘性定位常用于: 定位 字母列表的 头部元素。
    • 标示 B 部分的头部(粘性元素 dt元素,内容 = B) 元素, 在滚动 A 部分时，始终 处于 A 的下方
      • (没滚动 到 这个粘性元素,这个粘性元素 就不粘在 滚动祖先上,滚动到它的时候,它才粘在 滚动的祖先元素上 )。
    • 而在开始滚动 B 部分时，B 的头部(粘性元素) 会固定在屏幕顶部(粘在 滚动祖先上)，直到所有 B 的项 均完成滚动后，才被 C 的头部 (另一个粘性元素) 替代,换作 C的头部,粘在 滚动的祖先元素上。
  • ⑦ 粘性定位 前提:
    • 必须有一个 ❶ 滚动的祖先 + 必须指定 ❷ 偏移量 (top,right, bottom 或left) 四个阈值 其中之一，才可使 粘性定位生效。否则其行为 与相对定位相同。

• 实现效果 (此时, 单个大写字母 dt元素 = 粘性元素)

  • 

• css

/*一个可以滚动的 父元素/祖先元素*/
.sticky {
    margin: 10px;
    border: solid 1px;
    width: 50%;
    height: 5em;
    overflow: auto;
    font-size: 1.5em;
}
/*定义列表*/
.sticky dl {
    padding: 10px 0 0 10px;

}

/*定义列表的 定义项目*/
.sticky dt {
    border: solid 2px #2a4e52;
    background-color: #efefef;
    padding: 0 0 0 10px;
    /*把字母表的 单字母分类 设置粘性定位*/
    position: sticky;
    top:-1px;
    /*top:0px;*/
}
/*定义列表的 定义描述*/
.sticky dd {
    padding: 0 0 0 10px;
}

.sticky dt, dd {
    border-bottom: solid 1px #efefef;
}

• html

<div class="sticky">
    <dl>
        <dt>A</dt>
        <dd>Andrew W.K.</dd>
        <dd>Apparat</dd>
        <dd>Arcade Fire</dd>
        <dd>At The Drive-In</dd>
        <dd>Aziz Ansari</dd>
    </dl>
    <dl>
        <dt>B</dt>
        <dd>Bad</dd>
        <dd>Baby</dd>
        <dd>BBC</dd>
        <dd>Big</dd>
    </dl>
    <dl>
        <dt>C</dt>
        <dd>Chromeo</dd>
        <dd>Common</dd>
        <dd>Converge</dd>
        <dd>Crystal Castles</dd>
        <dd>Cursive</dd>
    </dl>
    <dl>
        <dt>E</dt>
        <dd>Explosions In The Sky</dd>
    </dl>
    <dl>
        <dt>T</dt>
        <dd>Ted Leo & The Pharmacists</dd>
        <dd>T-Pain</dd>
        <dd>Thrice</dd>
        <dd>TV On The Radio</dd>
        <dd>Two Gallants</dd>
    </dl>
</div>

---

---

♣ 结束语 和 友情链接

• 参考文档
  • MDN CSS 教程

---

• 友情链接
  • 包含块的 详细介绍: containing-block-details of visual formatting model details
  • 【CSS 单位 (详细介绍)】

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
• 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

---

• 支持作者: 持续更新中,❤ 您的每一分赞助，让作者走得更远。
  • 可以备注 支持的理由 或 想对作者说的话哦~
    
• 赞助二维码:
  

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 原文：https://blog.csdn.net/VickyTsai/article/details/103446291
  • 版权声明：本文为博主原创文章，转载 请评论告知作者 并附上博文链接！