有没有办法让CSS中的绝对定位基于整个页面而不是可视窗口？

Question

我目前有一个运行全屏画布元素的HTML页面。在这个canvas元素中，我有各种绘图填充页面。在调整页面大小时，会调整绘制的内容以填充屏幕。但是，一旦达到某个最小尺寸，就不再调整绘制的内容，而是向页面添加溢出滚动条。

现在，我正在尝试在画布上添加一个新元素，该元素永久固定在相对于画布右下角的位置。在画布重新缩放时，为div设置postion:absolute;的css样式可以正常工作。但是，只要页面越过最小尺寸并且画布不再重新缩放，而是显示滚动条，新的div就会随着可视窗口一直移动，而不是停留在相对于画布的位置。一旦大小足够小，我就习惯使用postion:fixed;（用jquery替换css），但这似乎也没有用。

有人有什么建议吗？

最佳，
萨米

Answer 1

在容器div中包含画布，即

<div class="canvas_container">
    <canvas></canvas>
    <div class="positioned_element"></div>
</div>

和你的CSS

.canvas_container{position:relative;}
.positioned_element{position:absolute;bottom:0;right:0;}

这将使定位元素位于父“.canvas_container”的右侧/底部，而不是站点的主体。