Yoga Docs: Rename website-next
to website
(#1613)
Summary: Pull Request resolved: https://github.com/facebook/yoga/pull/1613 So that GitHub links to edit a page point to the right place. This will fail in OSS build until I switch the directory used by Vercel instance, but I am waiting to do that until ready to land, since that would cause other in progress changes to fail when exported. Reviewed By: joevilches Differential Revision: D54837857
This commit is contained in:
committed by
Facebook GitHub Bot
parent
108c2f30a2
commit
e959e79610
37
website/docs/styling/position.mdx
Normal file
37
website/docs/styling/position.mdx
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
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](/docs/styling/insets) will offset the node from its normal position within its container.
|
||||
This node will always form a [containing block](/docs/advanced/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](/docs/styling/insets) will offset the node from its [containing block](/docs/advanced/containing-block).
|
||||
|
||||
**Static**: This node behaves like relative except it will ignore [insets](/docs/styling/insets) and will not
|
||||
form a [containing block](/docs/advanced/containing-block).
|
||||
|
||||
<Playground code={`<Layout config={{useWebDefaults: false}}>
|
||||
<Node
|
||||
style={{
|
||||
width: 200,
|
||||
height: 200,
|
||||
padding: 10,
|
||||
}}>
|
||||
<Node
|
||||
style={{
|
||||
margin: 5,
|
||||
height: 50,
|
||||
top: 20,
|
||||
position: 'relative',
|
||||
}}
|
||||
/>
|
||||
</Node>
|
||||
</Layout>`} />
|
Reference in New Issue
Block a user