Can anyone explain to me why the blue button in the bottom right of the keypad positioned itself there when I made it’s position: absolute?
It’s parent container is not positioned, so I thought it would position itself relative to the HTML and leave the container… But it didn’t, now I’m confused as to why
Hmm, I’m not seeing a blue button.
Sorry! I forgot to hit save on stackblitz after I changed it to blue.
Should show up now…
And also if you’re having a look at it… in my button selector I had to set the margin: 0.5px, otherwise the bottom button would overlap the buttons in the second last row and the formatting would be off, but only for that button in the last row… Why the heck does that happen? And why does vertical-align: middle make the horizontal gaps sizing equal to the vertical? if you comment them out, you’ll see what I mean… I racked my brain for a couple hours to try and understand why that happens
Because it’s placed inside the #keypad in the DOM. Setting an absolute position on it doesn’t change this. If you want to move it outside of the keypad then you’ll need to manually move it with top, left, bottom, right properties.
You are correct, it does not have any positioned parents, so once you set one of those properties on it, it will position itself with respect to the view port.
Ahh jeez… I’m a fool. I see now… Just had to play with it a bit more.
Thank you!