Skip to main content

Position

Relative (default): This node is laid out according to the specified flow of the flex container it is apart of. That is, it particpates in the flexbox algorithm and will take up space within the container, unlike absolute. Insets will offset the node from its normal position within its container. This node will always form a containing block.

Absolute: This node is removed from the specified flow of the flex container it is apart of. Absolute nodes do not take up space in its flex container and will not affect the position of its siblings. Insets will offset the node from its containing block.

Static: This node behaves like relative except it will ignore insets and will not form a containing block.

<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 200,
      padding: 10,
    }}>
    <Node
      style={{
        margin: 5,
        height: 50,
        top: 20,
        position: 'relative',
      }}
    />
  </Node>
</Layout>