一、定位类型
- 相对定位元素(relatively positioned element)是计算后位置属性为
relative
的元素。 - 绝对定位元素(absolutely positioned element)是计算后位置属性为
absolute
或fixed
的元素。 - 粘性定位元素(stickily positioned element)是计算后位置属性为
sticky
的元素。
大多数情况下,height
和width
被设定为auto的绝对定位元素,按其内容大小调整尺寸。但是,被绝对定位的元素可以通过:
- 指定
top
和bottom
,保留height
未指定(即auto
),来填充可用的垂直空间。 指定
left
和right
,并将width
指定为auto
,来填充可用的水平空间。如果
top
和bottom
都被指定(技术上,而不是auto
),top
胜出。- 如果指定了
left
和right
两侧,则在direction
为ltr(英语,水平日语等)时left
赢,并且在direction
为rtl时right
赢(阿拉伯文,希伯来文等)。
二、取值
static
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时
top
,right
,bottom
,left
和z-index
属性无效。
relative
该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。
absolute
不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。
fixed
不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。
fixed
属性会创建新的层叠上下文。当元素祖先的transform
属性非none
时,容器由视口改为该祖先。
sticky
根据文档的正常流程进行定位,然后根据
top
、right
、bottom
、left
,相对于其最近的滚动祖先和containing block (最近的块级祖先)偏移。偏移量不会影响任何其他元素的位置。该值始终创建一个新的堆叠上下文(stacking context)。请注意,粘性元素“粘”到最近的具有“滚动机制”的祖先(
overflow
是hidden
,scroll
,auto
, 或overlay
),即使该祖先不是最接近的实际滚动祖先。这有效地抑制了任何“粘性”行为 。- 当最近的滚动祖先和最近的块级祖先不是同一个元素时,元素大小根据最近的块级祖先计算,元素位置根据最近的滚动祖先计算。
- 如果最近的块级祖先的高度小于或者等于元素的高度,仍然有粘性效果,但观察不出来。因为元素本身和最近的块级祖先同时进出最近的滚动祖先。
三、确定包含块
一个元素的大小和位置经常受其包含块的影响 (width
、height
、top
等属性的百分比值是根据包含块大小计算的),确定其包含块的过程完全依赖于这个元素的 position
属性:
- 如果 position 属性为
static
、relative
、sticky
,其包含块就是由它的最近的祖先块元素**(比如说inline-block, block 或 list-item元素)或格式化上下文(比如说 a table container, flex container, grid container, or the block container itself)的内容区的边缘组成的。
- 如果 position 属性为
absolute
,包含块就是由它的最近的 position 的值不是static
(fixed
,absolute
,relative
或sticky
)的祖先元素的内边距区的边缘组成。
- 如果 position 属性是
fixed
,包含块就是由 viewport (in the case of continuous media) 组成的。
如果 position 属性是
absolute
或fixed
,包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的:- A
transform
orperspective
value other thannone
- A
will-change
value oftransform
orperspective
- A
filter
value other thannone
or awill-change
value offilter
(only works on Firefox).
- A