Note 8
CSS3定位
positon属性指定了元素的定位类型（静态的，相对的，绝对的或固定的）,默认值：static
JavaScript语法：object.style.position="absolute"
| 值 | 描述 |
|---|---|
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>元素的位置通过 left, top, right 以及 bottom 属性进行规定。能很准确的将元素移动到想要的位置。使元素的位置与文档流无关，因此不占据空间。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。Fixed定位使元素的位置与文档流无关，因此不占据空间。 |
| relative | 生成相对定位的元素，相对于元素默认的位置进行定位（相对其正常位置）。 因此， left:20 会向元素的 LEFT 位置添加 20 像素。同样通过top、bottom、left以及bottom来明确元素的位置。移动相对定位元素，但它原本所占的空间不会改变。 |
| sticky | 粘性定位，该定位基于用户滚动的位置。 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。粘性定位的元素依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
| initial | 设置该属性为默认值，详情查看 CSS initial 关键字。 |
PPI & DPI & DPR
PPI (Pixels Per Inch，每英寸像素数)
- 定义：
PPI是指在一英寸长度内可以容纳的像素数量。它是一个度量单位，用来衡量显示设备的像素密度。PPI通常用于屏幕显示设备，如手机、电视和电脑显示器 - 应用：
PPI常用于描述屏幕的清晰度。PPI越高，屏幕显示的图像就越细腻，细节也就越丰富。
DPI (Dots Per Inch，每英寸点数)
- 定义：
DPI是一个更通用的术语，通常用来描述打印分辨率，即每英寸长度内可以打印的点（墨点）数量。 - 应用：
DPI用于衡量打印机、扫描仪等输出设备的分辨率。DPI越高，打印或扫描的图像质量就越高。 - 显示DPI：图像在屏幕上显示时的分辨率，取决于屏幕的尺寸和分辨率
DPR (Device Pixel Ratio，设备像素比)
- 定义：
DPR是指显示设备的物理像素与CSS像素的比率。CSS像素是一种虚拟的像素单位，用于网页设计中。 - 应用：
DPR用于处理高分辨率显示设备上的图像缩放问题。例如，一个具有2倍DPR的设备，其物理像素是CSS像素的两倍。
区别说明
- 应用领域：
PPI主要用于屏幕显示设备的像素密度，而DPI主要用于打印和扫描设备的分辨率。DPR是一个与Web设计相关的术语，用于处理不同分辨率设备上的图像和布局。 - 度量单位：
PPI和DPI都是以英寸为单位来度量像素或点的数量，但它们分别用于不同的设备和场景。 - 与设备分辨率的关系：
PPI是设备固有的属性，而DPI通常与打印质量相关。DPR是一个比率，用来调整Web内容在不同设备上的表现。