Add position documentation (#1602)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1602

tsia

Reviewed By: yungsters

Differential Revision: D54781220

fbshipit-source-id: 1141c0f6cdc9840b7afabbd25e344fe9e5042d4e

website-next/docs/examples/position.mdx

@@ -1,5 +1,36 @@
 ---
-sidebar_position: 13
+sidebar_position: 11
 ---
 
-# Absolute/Relative/Static Positioning
+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>`} />