#position

#介绍

position 属性用于指定一个元件在文档中的定位方式。 与 top、right、bottom、left 属性一起决定元件的最终位置。

#定位类型

• 定位元件（positioned element）是其计算后位置属性为 relative，absolute，fixed 或 sticky 的一个元件。

• 相对定位元件（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 优先。

#使用示例

css-apisrc/position/App.tsx

预览

#语法

position: relative;
position: fixed;
position: absolute;

#取值

#relative

默认值。当前元件将参与父节点布局，top 等属性将在布局所得基础上添加相对偏移。

#absolute

当前元件将不参与父节点布局，当前元件会在父元件的 padding bound 中进行绝对布局，即由 top 等属性决定其位置。绝对定位的元件可以设置外边距（margin），且不会与其他边距合并。

在弹性布局中，可以使用 align-self: center 实现在交叉轴居中的效果。

#fixed

当前元件将不参与父节点布局，当前元件将被视为根节点的子元件进行绝对布局，即由 top 等属性决定其位置。

#sticky

当前元件将参与父节点布局，当该元件的父节点为 scroll view 的时候该属性才有意义。当该节点因父节点的 scroll 产生位移时，该节点会与父节点的 view port 至少保持 top 等属性所规定的距离。list 用大度的吸顶元件。

#形式定义

#形式语法

position: relative | absolute | fixed | sticky

#与 Web 的区别

mdn: position

1. Lynx 的默认值为 relative，Web 的默认值为 static。

#兼容性

#常见问题

1. 假如在 position: absolute 的元件使用了 z-index，请同时在父元件上设置 z-index: 0；