1

I'm trying to keep a div in an absolute position (at the bottom right corner). The issue is that when overflowing, the scroll makes the absolute position move with the parent, as opposed to staying in position.

There are a lot of other questions like this, but this one is limited due to the use of the Material UI React framework.

I have the parent with relative position:

const MUIPaper = withStyles({
  root: {
    position: "relative",
    overflow: "auto"
  }
})(Paper);

And the child with absolute:

const MUIButton = withStyles(theme => ({
  root: {
    position: "absolute",
    bottom: "1%",
    right: "1%"
  }
}))(Button);

I saw some questions similar to this, but from ~2012 that said that it wasn't possible. Is this still the case or is there a way around this without using a fixed position?

Andrew
  • 107
  • 10
  • 1
    you need sticky: related https://stackoverflow.com/a/61431436/8620333 – Temani Afif May 11 '20 at 15:19
  • There is a login page so I cannot see that. But from what I see you do not want the `Copy to clipboard` element to move. If that's the case why not just use `position:fixed`? – Tan Kim Loong May 11 '20 at 15:20
  • @TemaniAfif That worked but the positioning of `right` is lost? Is there a way to keep that? – Andrew May 11 '20 at 15:22
  • @TanKimLoong I mentioned that I want to avoid `fixed` - it's because `fixed` will lose its true positioning depending on mobile/desktop/resolutions. – Andrew May 11 '20 at 15:23
  • 1
    you should edit more code not only change the position. Check in detail the example I sent to see what I have done (there is comments in code) – Temani Afif May 11 '20 at 15:24
  • @AndrewRaleigh what if you do it like what modal usually does then? Have a transparent parent that spans the whole screen, absolutely position. Then this child will also be absolutely position, with `bottom` and `right` property. There are ways to make child element clickable through parent. https://stackoverflow.com/questions/3680429/click-through-div-to-underlying-elements Or just put div as a sibling to your top element. – Tan Kim Loong May 11 '20 at 15:28

1 Answers1

1

Actually, the issue comes from your layout designing. it is obvious to get this behavior for your absolute button. you should use another wrapper and the absolute button should be the brother of scrolled Paper, pay attention to this image:

enter image description here

The red wrapper should have the position: relative property and the button should have position to its parent. and the Paper should be free to act as like.

AmerllicA
  • 29,059
  • 15
  • 130
  • 154
  • I followed @Temani Afif 's answer by setting sticky. Unfortunately it was an issue from that, and I should've clarified in the question, but because of my react states the button was a separate component from the parent paper. – Andrew May 11 '20 at 20:10
  • 1
    @AndrewRaleigh, Ok, no problem, pass a `position: relative` to the parent, even the button component in the Paper can get the position. but the Temani is right. using a position sticky can help in this case. – AmerllicA May 11 '20 at 21:04