From be59f394c4505e58059a0a2bcaf9959b79c98718 Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Tue, 12 Mar 2024 11:31:46 -0700 Subject: [PATCH] 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 | 35 +++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/website-next/docs/examples/position.mdx b/website-next/docs/examples/position.mdx index e1f5f6b7..42ec0e28 100644 --- a/website-next/docs/examples/position.mdx +++ b/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). + + + + + +`} />