yoga/website-next/docs/examples/position.mdx

---
sidebar_position: 11
---

import Playground from '@site/src/components/Playground';

# 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 (`left`, `right`, `top`, `bottom`, etc) will offset the node from its normal position within its container.
This node will always form a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).


**Static**: This node behaves like `relative` except it will ignore insets and will not
form a [containing block](https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block).

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