30. 定位 {ignore}

[toc]

0. 前言

视觉格式化模型，大体上将页面中盒子的排列分为三种方式：

  1. 常规流
  2. 浮动：float
  3. 定位：position

定位是我们所要学习的视觉格式化模型的最后一个组成部分，学习完定位的相关知识，css基础部分也就结束了。

定位的作用：手动控制元素在包含块中的精准位置。

1. position属性

position mdn

  • 默认值：static，静态定位（不定位）
  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位

一个元素，只要position的取值不是static，认为该元素是一个定位元素。

定位元素会脱离文档流（相对定位除外）。

文档流，即：常规流，Normal Flow

一个脱离了文档流的元素：

  1. 文档流中的元素摆放时，会忽略脱离了文档流的元素
  2. 文档流中元素计算自动高度时，会忽略脱离了文档流的元素

2. 相对定位

不会导致元素脱离文档流，只是让元素在原来位置上进行偏移。

可以通过四个CSS属性对设置其位置：

  • left
  • right
  • top
  • bottom

原始位置依旧被占据，并不会因为偏移，而释放原来占的那块位置，即：盒子的偏移不会对其他盒子造成任何影响。

  • 如果同时设置了 left 和 right，那么，以 left 为准；
  • 如果同时设置了 top 和 bottom，那么，以 top 为准；

3. 绝对定位

  1. 如果不定义宽高的话，那么宽高为auto，适应内容。

  2. 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块。若找不到，则它的包含块为整个网页（整个网页，又称为：初始化包含块）。

    • 定位元素：指的是 position 属性值不为 static 的元素。
    • 填充盒：padding-box

绝对定位的关键：找包含块。

4. 固定定位

和绝对定位对比，只有包含块不同：固定为视口（浏览器的可视窗口）。其他情况和绝对定位完全一样。

视口和初始化包含块（整个网页）的区别：视口指的是整个网页中我们所能看到的部分，而初始化包含块指的是整个网页。

5. 定位下的居中

某个方向居中：

  1. 定宽（高）
  2. 将左右（上下）距离设置为0
  3. 将左右（上下）margin设置为auto

绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

6. 多个定位元素重叠时

z-index mdn

设置z-index，通常情况下，该值越大，越靠近用户

注意：只有定位元素设置z-index才有效。

z-index可以是负数，如果是负数，则遇到常规流、浮动元素，则会被其覆盖。

这一部分还与 堆叠上下文 有关，堆叠上下文会放到拓宽课程来讲。

7. 补充

  • 绝对定位、固定定位元素一定是块盒

  • 绝对定位、固定定位元素一定不是浮动

    • 盒子不可能即定位又浮动
  • 没有外边距合并
  • 目前 position 的属性值，又多了一个 sticky，具体内容可以查看 阮一峰老师的 CSS定位详解

小结

  • 定位元素会脱离文档流（Normal Flow）。
  • 文档流中的元素看不到定位元素。

  • 相对定位的元素

    • 是相对于自身进行偏移；
    • 原始位置所占据的空间并不会释放；

  • 绝对定位的元素

    • 如果高度和宽度没有设置，那么将适应内容；
    • 包含块是就近的定位祖先元素的填充盒；
    • 若祖先元素中不存在定位元素，那么包含块是整个网页（初始化包含块）；

  • 固定定位的元素

    • 包含块是视口区域
    • 其他方面和绝对定位元素相同

  • 定位元素居中显示

    • 前提得是 absolute 或 fixed 定位；
    • 尺寸固定，且 4 个方向都设置为 0；
    • margin 设置为 auto
  • 多个定位元素重叠时，可以使用 z-index 属性来设置它们的显示靠前还是靠后。