position的relative和absolute定位原点是哪里？

Answer 1

简言之，两者的定位原点都是其包含块区域的左上角；只是两种定位元素的包含块有所不同，得出的表明结论就是上述几位所说的。我简单的说一下我对包含块的一些理解：

包含块（containing block）：用来确定和影响元素的尺寸和位置属性的矩形区域；

The size and position of an element are often impacted by its containing block. Percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are computed from the element's containing block. ——MDN

一个元素的包含块完全受其position属性值的影响：

1. static或relative：最近的块级（display属性值为block，inline-block或list-item）祖先元素的content-box区域；或者最近的建立格式上下文的祖先元素，比如：table容器，flex容器，grid容器或块级容器。

2. absolute：最近的非static（fixed, absolute, relative, or sticky）祖先元素的padding-box区域。

3. fixed：可视窗口viewport本身（属于continuous media类型时）或页面区域page area（属于paged media类型时），即初始包含块；

4. 当属性值为fixed或absolute时，其包含块还有可能是最近的含有transform或perspective值不为none的祖先元素的padding-box区域。

注：html元素的包含块叫做初始包含块（initial containing block），它具有可视窗口（用于连续媒体）或页面区域（用于分页媒体）的尺寸