DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity
Files
f22cfd52e0b53cb3e3521ad1480389d616b4fa3e
yoga/docs/_docs/flexbox/absolute-position.md
Emil Sjolander f2080e520f Move yoga docs into docs folder on master branch 
Summary: Move yoga docs into master branch so that pull requests are able to include doc updates as part of other changes.

Reviewed By: JoelMarcey

Differential Revision: D4365700

fbshipit-source-id: 2f46a88974104c454c00bcdf1257abb5c4075a68
2016-12-28 04:09:48 -08:00

1.8 KiB
Raw Blame History

docid, title, layout, permalink
docid title layout permalink
absolute-position Absolute positioning docs /docs/absolute-position/

The Position property tells Flexbox how you want your item to be positioned within its parent. There are 2 options:

  • Relative (default)
  • Absolute

An item marked with Position = Absolute is positioned absolutely in regards to its parent. This is done through 6 properties:

  • Left - controls the distance a child's left edge is from the parent's left edge
  • Top - controls the distance a child's top edge is from the parent's top edge
  • Right - controls the distance a child's right edge is from the parent's right edge
  • Bottom - controls the distance a child's bottom edge is from the parent's bottom edge
  • Start - controls the distance a child's start edge is from the parent's start edge
  • End - controls the distance a child's end edge is from the parent's end edge

Using these options you can control the size and position of an absolute item within its parent. Because absolutely positioned children don't effect their siblings layout Position = Absolute can be used to create overlays and stack children in the Z axis.

Position = Absolute; Start = 0; Top = 0; Width = 50; Height = 50;

Position = Absolute; Start = 10; Top = 10; End = 10; Bottom = 10;