How to move the image partially outside of MUI dialog?-CodePudding

Trying to move an image outside of MUI dialog, so that the bottom part of the image will be inside dialog while the upper part of the image will be outside the dialog. I've tried to implement this solution CSS: position nested element slightly outside of parent element's bounds but it doesn't work.

This is my dialog:

<Dialog open={this.state.open} onEnter={console.log("Hey.")}>
   <div className="dialog-logo-outside" />
   <DialogTitle>Hello CodeSandbox</DialogTitle>
   <DialogContent>Start editing to see some magic happen!</DialogContent>
</Dialog>

This is CSS:

.App {
  font-family: sans-serif;
  text-align: center;
}

.dialog-logo-outside {
  width: 100px;
  height: 100px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(https://i.imgur.com/24p8XE7.jpg);
}

Here you can see example in sandbox: https://codesandbox.io/s/material-ui-dialog-sample-forked-8w5wt

CodePudding user response：

You have not explicitly set the y position of the image.

There are several ways of moving the image, but as you have already set position: absolute you could just add for example top: -50px to push it upwards.

CodePudding user response：

Actually, I needed to add overflow: inherit to the paper subcomponent of Dialog, you can see a working example here: https://codesandbox.io/s/material-ui-dialog-sample-forked-3ru7k