Float Box – Stacks

FloatBox

FloatBox is a component that can position its child elements over the parent component using absolute positioning. It's similar to the Box component but has the added benefit of positioning elements precisely within the parent container.

With FloatBox, you can easily control the position of each child element by specifying exact coordinates, such as top, bottom, left, and right.

Example

<Box flex="fluid">
  <FloatBox offset="20%">
    <Placeholder flex="fluid" label="offset: 20%" />
  </FloatBox>
  <FloatBox top={0} left={0}>
    <Placeholder width={100} label="t: 0, l: 0" />
  </FloatBox>
  <FloatBox top={0} right={0}>
    <Placeholder width={100} label="t: 0, r: 0" />
  </FloatBox>
  <FloatBox bottom={0} left={0}>
    <Placeholder width={100} label="b: 0, l: 0" />
  </FloatBox>
  <FloatBox bottom={0} right={0}>
    <Placeholder width={100} label="b: 0, r: 0" />
  </FloatBox>
</Box>

Expand code

Props

The FloatBox component is created using the Box component. It extends all the props supported by Box, as well as React Native View (opens in a new tab), and the props mentioned below.