How to overlay the expand of accordion?

Question

I would like to overlay the expand of the accordion but I don't know whoch part should I do. in the first picture show that output I want it overlay the other textfield when clicking the dropdown icon, as for the second picture show my current output which every time I click the dropdown it does not overlay rather it adjust the textfield. any advice?

What I want:

My current output:

my code:

<Accordion expanded={isExpanded} onClick={() => setExpanded(!isExpanded)}>
      <AccordionSummary
        expandIcon={<Icon icon={IMAGE.DropIcon} classStyle={classes.icon} />}>
        {changeType}
      </AccordionSummary>
      <AccordionDetails>
        <Button
          className={classes.button}
          onClick={() => onChangeType('GOLD')}>
          GOLD
        </Button>
        <Button
          className={classes.button}
          onClick={() => onChangeType('GEMS')}>
          GEMS
        </Button>
        <Button
          className={classes.button}
          onClick={() => onChangeType('COINS')}>
          COINS
        </Button>
      </AccordionDetails>
    </Accordion>

my styles:

const Accordion = withStyles({
  root: {
    padding: 0,
    marginBottom:'1rem',
    borderRadius: '8px',
    boxShadow: 'none',
    minHeight: '2em',
    width: '15vw',
    fontSize: '1.5em',
    fontWeight: 600,
    '&:not(:last-child)': {
      borderBottom: 0,
    },
    '&:before': {
      display: 'none',
    },
    '&$expanded': {
      minHeight: '2em',
      padding: 0,
      marginTop: 2,
      marginBottom: 2,
    },
  },
  expanded: {},
})(MuiAccordion);

const AccordionSummary = withStyles({
  root: {
    margin: 0,
    padding: '0 0 0 1em',
    display: 'flex',
    flexDirection: 'row',
    borderRadius: '8px',
    border: '1px solid',
    minHeight: '2em',
    width: '13.7vw',
    '&$expanded': {
      minHeight: '2em',
    },
    '& .MuiAccordionSummary-expandIcon.Mui-expanded': {
      transform: 'none',
    },
    '& .MuiAccordionSummary-expandIcon': {
      transform: 'none',
      transition: 'none',
    },
    '& .MuiIconButton-edgeEnd': {
      margin: 0,
      padding: 0,
    },
  },
  content: {
    margin: 0,
    '&$expanded': {
      margin: 0,
    },
  },
  expanded: {},
})(MuiAccordionSummary);

const AccordionDetails = withStyles(() => ({
  root: {
    padding: '0',
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
  },
}))(MuiAccordionDetails);

Answer 1

You can add overlay by adding z-index to the AccordionDetails.

<Accordion >
    <AccordionSummary
      expandIcon={<ExpandMoreIcon />}
      aria-controls="panel1a-content"
      id="panel1a-header"
    >
      <Typography>Accordion 1</Typography>
    </AccordionSummary>
    <div style={{zIndex:1 ,position:'absolute' ,width:'100%'}}>
      <Card >
        <AccordionDetails>
          <Button>GOLD</Button>
          <Button>GEMS</Button>
          <Button>COINS</Button>
        </AccordionDetails>
      </Card>
    </div>
  </Accordion>
  {/* Other contents of the page  */}

Answer 2

hey I was looking to Accadian docs https://mui.com/components/accordion/ and all you need to do is just add some for AccordionDetails like background color , and to match the image some padding at the bottom, border and border radius and I tried this for demonstrate this here https://stackblitz.com/edit/react-k3tktv?file=demo.js