zIndex

Atomic props for controlling the stack order of an element.

Atomic Props	CSS Properties
zIndex-{value} / zIndex={value}	z-index: {value}

Usage

Result

Loading...

Live Editor

function Demo() { const Item = styled('div', 'white toCenter shadow bgOrange400 circle-80 absolute') return ( <Box white relative h-160 bgOrange100 p6> <Item zIndex-20>20</Item> <Item left-80 zIndex-10> 10 </Item> <Item left-140 zIndex-0> 0 </Item> </Box> ) }

function Demo() {
  const Item = styled('div', 'white toCenter shadow bgOrange400 circle-80 absolute')
  return (
    <Box white relative h-160 bgOrange100 p6>
      <Item zIndex-20>20</Item>
      <Item left-80 zIndex-10>
        10
      </Item>
      <Item left-140 zIndex-0>
        0
      </Item>
    </Box>
  )
}