Absolute

Use Absolute component to control position. Use with a Relative parent/ancestor.

Extends: Box

Absolute
<Relative
  p={5}
  zIndex={-1}
  bg='lightBlue'>
  <Absolute
    p={3}
    m={2}
    bg='blue'
    top={0}
    right={0}>
    Absolute
  </Absolute>
</Relative>

Note: zIndex is set for documentation purposes only. Generally you should avoid using zIndex with positioning.

Props

PropTypeDescription
topnumber, string, or arraySets top
bottomnumber, string, or arraySets bottom
leftnumber, string, or arraySets left
rightnumber, string, or arraySets right
zIndexnumber or stringSets z-index