javascript - 当我在 chrome mobile 中向下滚动时，绝对定位的 DIV 会改变位置，如何解决这个问题？

Question

这是我的应用 https://scisaif.github.io/Budget-App/

div 元素的 CSS:

.add-box, .add-box-opt {
   position: absolute;
   bottom: 0vh;
   right: 0vw;
   width: 100px;
   min-height: 100px;
   border-top: 2px solid white;
   border-left: 2px solid white;
   border-radius: 80% 0 0 0 ;
   box-shadow: -1px -1px 10px rgba(211, 209, 209, 0.562);
   cursor: crosshair;
   }

我希望 div 框保持在右下角，即使我滚动，这个问题只发生在移动版的 chrome 浏览器中。请帮忙。

滚动前: before scroll

滚动后: after scroll

Answer 1

您的问题应该通过使用 position: fixed 而不是 position: absolute 来解决。

这是因为 position: fixed 是相对于视口(viewport)的，而 position: absolute 是相对于最近定位的祖先

确保保留 bottom: 0; 和 right: 0;。