Place one react component over (z-axis) another

Question

I would like to have a band over a component when the component is locked.

The Review component root is a Material UI Paper element that has a host of other elements inside this Paper . There are a half dozen of these particular elements on the page. When locked===true for each element, I want something to sit, centered (vert and horz), on top of the review element.

I found that a Popover element works fine as it can be moved to center/center. However, being a Modal, it doesn't allow interaction with the rest of the page.

<Popover
    id={"id"}
    open={Boolean(anchorEl)}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: 'center',
        horizontal: 'center',
    }}
    transformOrigin={{
        vertical: 'center',
        horizontal: 'center',
    }}
>The content of the Popover.</Popover>

I then ensure that anchorEl points to the correct Paper. This works for a 'popover'... The popper element, which is one that isn't in the modal tree (and thus allows multiple and doesn't steal control of the entire app) doesn't have the positioning needed.

<Popper id={'popperID'} open={Boolean(anchorEl)} anchorEl={anchorEl} placement={'top'} transition>
  {({ TransitionProps }) => (
    <Fade {...TransitionProps}>
      <div className={classes.busy}>The content of the Popper.</div>
    </Fade>
  )}
</Popper>

This puts the element vertically on top (y-axis) my anchorEl ... which is not what I want.

I've also tried just putting another Paper in there, but it just ends up vertically 'below' my component.

EDIT: Worth noting I have also tried to position it with CSS. The problem is that absolute positioning (that should position it relative to the parent) seems to position it relative to the entire app instead of the JSX parent/component.

How can I do this?

Answer 1

Use absolute positioning as you said, but you have to give the parent component/element display: relative . Absolute positioning works from the closest ancestor that is not statically positioned. https://www.w3schools.com/cssref/pr_class_position.asp