Fill out "About Yoga", "Laying out a Yoga tree" , and "Styling" (#1591)

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

Adds initial documentation to these sections.

Reviewed By: joevilches

Differential Revision: D54708141

fbshipit-source-id: b2c1ac20573840833a3e5fde8c7b53f2770cecbd

website-next/docs/styling/position.mdx

@@ -0,0 +1,36 @@
+---
+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>`} />