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

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

包含块（

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

属性值的影响：

```
static
```
或
```
relative
```
：最近的块级（
```
display
```
属性值为
```
block
```
，
```
inline-block
```
或
```
list-item
```
）祖先元素的
```
content-box
```
区域；或者最近的建立格式上下文的祖先元素，比如：
```
table
```
容器，
```
flex
```
容器，
```
grid
```
容器或块级容器。
```
absolute
```
：最近的非
```
static
```
（fixed, absolute, relative, or sticky）祖先元素的
```
padding-box
```
区域。
```
fixed
```
：可视窗口
```
viewport
```
本身（属于
```
continuous media
```
类型时）或页面区域
```
page area
```
（属于
```
paged media
```
类型时），即初始包含块；
当属性值为
```
fixed
```
或
```
absolute
```
时，其包含块还有可能是最近的含有
```
transform
```
或
```
perspective
```
值不为
```
none
```
的祖先元素的
```
padding-box
```
区域。

注：

html

元素的包含块叫做初始包含块（

initial containing block

），它具有可视窗口（用于连续媒体）或页面区域（用于分页媒体）的尺寸

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

面试问答相关栏目本月热门文章