CSS Position 定位

Yukino 410 2021-12-29

position:static(默认)|relative|absolute|fixed|sticky

static(正常)定位

静态定位,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。

relative(相对)定位

相对定位是元素在文档中正常位置的偏移指定的值,不影响其他的元素的偏移。该关键字下,元素先放置在未添加定位时的位置(不脱离文档流,依旧在文档中占据空间),再在不改变页面布局的前提下相对自身原本位置调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。

absolute(绝对)定位

绝对定位脱离了文档流,在布置文档流中其他元素时,绝对定位元素==不占空间==,绝对定位相对于最近的==非static祖先元素==定位,当祖先元素不存在时,则相对于ICB(initial container block,初始包含块)

fixed(固定)定位

固定定位与绝对定位类似,但元素的包含块为viewport视口。该定位方式常用于创建在滚动屏幕时仍固定在相同位置的元素。

sticky(粘性)定位

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

摘自position MDN


# CSS # 前端 # 布局