CSS（八）——视觉格式化模型（定位）

CSS（八）——视觉格式化模型（定位）

本篇笔记记录了定位的基础知识点，并不复杂，阅读顺序可以自行决定。

含义

手动控制元素在包含块中的精准位置——使用属性（position）

position属性

• 默认值：static， 静态定位（不定位），即不改变元素的状态。
• relative：相对定位。
• absolute：决定定位。
• fixed：固定定位。

如果position属性为默认值，则该元素为常规流或者浮动；反之，则是相应的定位。

定位元素与浮动元素会脱离文档流（【注】：相对定位除外——后续会有具体说明）。

脱离文档流元素的特点

1. 文档流中的元素在排列时，会忽略脱离文档流元素（与浮动样式中的规则一样）。
2. 文档流元素计算自动高度时，会忽略脱离了文档流的元素（与遇到浮动样式中的规则一样）。

特殊的定位（相对定位：relative）

相对定位不会导致元素脱离文档流。只是在元素在原来位置上进行偏移（即，只会改变显示位置）。

定位的偏移

可以通过四个CSS属性对位置进行设置。

• left
• right
• top
• bottom

left：对左边的偏移

/*该样式会使元素左边出现30px的空白，整个元素块整体向右移动。*/
left:30px;

该样式与修改margin-left的样式有一定区别

• margin属于盒子的一部分，所以在修改margin时，遵循盒子的固定宽高，从而使盒子内的显示样式发生变化。
• 定位中的偏移不属于盒子的一部分，所以是从盒子整体的外部来修改盒子的位置。即，在偏移过程中不会改变盒子的大小及宽高。

四个偏移属性的共同点

• 在相对定位中，偏移仅仅是基于盒子原来的位置
• 盒子偏移不影响其他盒子，更不会因为其他盒子而不同。
• 盒子的偏移表示的是视觉效果上的偏差，盒子原来在哪，偏移后依旧在哪。
• 同时设置四个属性值的时候，因为冲突关系会导致只有left和top有效。

绝对定位（absolute）

特点

1. 宽高为auto时，适应内容的高度。
2. 包含块变化：找祖先元素中的第一个定位元素，该元素的填充盒为其包含块。——填充盒 = padding + content。
3. 如果该元素寻找父元素时，一直到html中都没有定位样式，则该元素处于整个页面的包含块。

固定定位（fixed）

固定定位除包含块外，其余的情况与绝对定位一样。

包含块：固定为浏览器的可视窗口（可视窗口为可以看到的区域）

页面中的小广告就是这种定位——无论页面如何滚动，他就是会出现在固定的位置。

PS：就是那个“一刀999”或者是“银河首家线上赌场，什么什么在线发牌”之类的广告，嘿嘿。

定位下的居中

某个方向居中

1. 定宽（高）——如果是水平方向就要定宽；垂直方向定高。
2. 将四周距离设置为0。
3. 将margin设置为auto。

多个定位元素重叠时

堆叠上下文，细节过多，后续可能会单独更新。

设置z-index属性，**【通常情况下】：**该值越大，越靠近用户。

z-index可以是负数，遇到常规流、浮动会被覆盖。

补充知识点

1. 绝对定位和固定定位是块盒。——行盒固定定位不存在。
2. 绝对定位和固定定位一定不是浮动。——视觉格式化模型中的三种情况只能选其一。

总结

本篇笔记中关于定位比较好理解（基础部分），后续会有相应较难的知识点。接下来总结定位的基础知识点。

• 首先代表的含义是指：设置该属性的元素在根据属性值的特性指定的摸个范围内的具体位置。——其中包括：相对定位、绝对定位以及固定定位。

• 在相对定位中，定位基于该元素初始位置进行在页面显示上的位置偏移。即实际位置并没有发生改变，只是对显示在浏览器上的视觉位置发生了改变（偏移了，但没完全偏移），底层原理较为复杂，所以就先单纯理解这个比较量子的概念吧。【注】：相对定位比较特殊，它没有脱离常规流。】

• 补充说明相对定位：在使用属性对元素进行偏移的时候与设置元素盒子的margin不同。margin本质上属于元素盒子的一部分，在设置margin的时候属于修改盒子内部的属性，如果对一个充满页面的盒子进行偏移时会发现盒子内部的宽高等属性值会发什变化；而使用定位进行偏移的时候，因为定位偏移是对整个元素盒子进行的操作，所以盒子本身不会有变化，只是显示的位置发生了变化。

• 在绝对定位中，需要注意一下三点

  1. 宽高为auto时，适应内容的高度。
  2. 包含块变化：找祖先元素中的第一个定位元素，该元素的填充盒为其包含块。——填充盒 = padding + content。
  3. 如果该元素寻找父元素时，一直到html中都没有定位样式，则该元素处于整个页面的包含块。

• 固定定位除开包含块以外，其余的部分与绝对定位一致。固定定位的包含块指的是，浏览器的视窗。视窗的位置如图 1-1 所示：
  
  图 1-1 视窗区域位置

一般在页面上看到了怎么滚动鼠标都会跟着你的小广告就是用固定定位做的

• 在定位中想设置各种居中，一下对号入座：

  1. 定宽（高）——如果是水平方向就要定宽；垂直方向定高。
  2. 将四周距离设置为0。
  3. 将margin设置为auto。

• 绝对定位和固定定位是块盒；且定位与浮动不可兼得。