Position Components

<Box p={2} mb={200}>
  <Heading mb={2}>Relative + Absolute</Heading>
  <Relative size={128} mx={128} my={6}>
    <BorderBox size="100%">
      <Absolute left="100%" top={0} color="text.inverse" bg="bg.successInverse" p={1}>
        rt
      </Absolute>
      <Absolute right="100%" top={0} color="text.inverse" bg="bg.successInverse" p={1}>
        lt
      </Absolute>
      <Absolute left="100%" bottom={0} color="text.inverse" bg="bg.successInverse" p={1}>
        rb
      </Absolute>
      <Absolute right="100%" bottom={0} color="text.inverse" bg="bg.successInverse" p={1}>
        lb
      </Absolute>
      <Absolute left={0} top="100%" color="text.inverse" bg="bg.successInverse" p={1}>
        bl
      </Absolute>
      <Absolute right={0} top="100%" color="text.inverse" bg="bg.successInverse" p={1}>
        br
      </Absolute>
      <Absolute left={0} bottom="100%" color="text.inverse" bg="bg.successInverse" p={1}>
        tl
      </Absolute>
      <Absolute right={0} bottom="100%" color="text.inverse" bg="bg.successInverse" p={1}>
        tr
      </Absolute>
    </BorderBox>
  </Relative>

  <Heading my={2}>Sticky</Heading>

  <BorderBox border={1} borderColor="border.success" height={500}>
    <Sticky top={0} bg="bg.success" p={6}>
      I'm sticky!
    </Sticky>
  </BorderBox>

  <Heading my={2}>Fixed</Heading>
  <p>(see the bottom right of the screen)</p>

  <Fixed bottom={0} right={0} color="text.inverse" bg="bg.dangerInverse" p={2}>
    I'm fixed to the bottom right.
  </Fixed>
</Box>