Copy review

Reviewed By: danielbuechele

Differential Revision: D7009457

fbshipit-source-id: d5053751a2bde369a65a740c03ace5bbd2eec02f
This commit is contained in:
Emil Sjölander
2018-02-16 06:41:54 -08:00
committed by Facebook Github Bot
parent 0c74a72fac
commit bba81781af
9 changed files with 74 additions and 79 deletions

View File

@@ -5,19 +5,26 @@ hasPlayground: true
---
## Absolute/Relative Layout
### Relative Layout
The `position type` of an element defines how it is
positioned within its parent.
The element is positioned according to the normal flow of the view, and then offset relative to itself based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements. Try out relative layout by changing the `positionType` of any child view and try to add offset to it.
**RELATIVE (DEFAULT)** By default an element is positioned
relatively. This means an element is positioned according to the
normal flow of the layout, and then offset relative to that position
based on the values of `top`, `right`, `bottom`, and `left`.
The offset does not affect the position of any sibling or parent elements.
### Absolute Layout
The element doesn't take part in the normal flow. It is laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom` and `left` values. Try this out in playground.
#### Position Type
**ABSOLUTE** When positioned absolutely an element doesn't take
part in the normal layout flow. It is instead laid out independent
of its siblings. The position is determined based on the
`top`, `right`, `bottom`, and `left` values.
<controls prop="positionType"></controls>
#### Position
The position values `top`, `right`, `bottom`, and `left` behave
differently depending on the `position type` of the element. For
a `relative` element they offset the position of the element in the
direction specified. For `absolute` element though these properties
specify the offset of the element's side from the same side on the parent.
<controls prop="position"></controls>