A absolute positioning sample where HTML is moved a level higher.

absolutePositioningWithHigherHTML.tsx

const useStyles = makeStyles({
correctSlidersWrapper: {
    display: 'flex',
    alignItems: 'center',
    position: 'relative',
    '&__rightButton': {
      position: 'absolute',
      right: '0',
    },
    '&__leftButton': {
      position: 'absolute',
      left: '0',
    },
  }
}, {name: 'MuiBlogPost'});

export function SliderButtonsBlogPost() {
  const classes = useStyles();

  return (
    <section className={classes.buttonSamplesWrapper}>
      <h1>Flexed Positions</h1>
      <div className={`${classes.correctSlidersWrapper}`} >
        <LeftSliderButton className={`${classes.correctSlidersWrapper}__leftButton`} />
        <div className={`${classes.sampleWrapper}`}>
          {get10RandomColors().map(color => <Color colorName={color} />)}
        </div>
        <RightSliderButton className={`${classes.correctSlidersWrapper}__rightButton`} />
      </div>
    </section>
  );
}