有沒有什麼辦法讓CSS中的絕對定位基於整個頁面而不是可視窗口？

我目前有一個運行全屏畫布元素的HTML頁面。在這個畫布元素中，我繪製了填充頁面的各種東西。在頁面調整大小時，繪製的內容會根據大小進行調整以填充屏幕。但是，一旦達到某個最小尺寸，繪製的內容就不再調整，而是向頁面添加溢出滾動條。有沒有什麼辦法讓CSS中的絕對定位基於整個頁面而不是可視窗口？

現在，我試圖在畫布上添加一個新的元素，該元素永久地固定到相對於畫布右下角的位置。在畫布重新調整尺寸的同時，爲div創建postion:absolute;的CSS樣式效果很好。但是，只要頁面越過最小大小並且畫布不再重新縮放，並且出現滾動條，則新div將繼續與可視窗口一起移動，而不是停留在與畫布相關的位置。我玩過postion:fixed;（用jquery替換css），一旦尺寸足夠小，但這似乎也不工作。

有沒有人有任何建議？

最佳，
薩米

來源

2012-04-12 thisissami

您可以製作一個div位置：相對於畫布？ – jimw 2012-04-12 00:11:50

你可以在jsfiddle.net上重新創建一個小例子以供參考嗎？ – 2012-04-12 00:12:15

@jimw - 不，你不能。如果瀏覽器無法處理畫布元素，則僅顯示畫布內的任何內容。 – thisissami 2012-04-13 00:27:14

包含畫布在一個容器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」的底部，而不是網站的正文。

來源

2012-04-12 00:12:33

我已經做到了這一點，但它不工作...使用任何正值的「底部」使我想要放置在窗口外的div，暗示它在底下的div完全位於帆布。我只使用谷歌瀏覽器的javascript開發工具對此進行了調試，因此我不知道這是否是Chrome特定的問題，以及這是否適用於其他瀏覽器。我想我應該試試... – thisissami 2012-04-12 00:25:46

不，它不適用於我在Firefox中。將窗口的左側部分移過最小尺寸將使新的div隨之移動。 – thisissami 2012-04-12 00:28:13

您必須設置容器的寬度和高度。這裏有一個例子：http://jsfiddle.net/mq9x8/4/ **編輯**：更新它。 – 2012-04-12 00:32:40

有沒有什麼辦法讓CSS中的絕對定位基於整個頁面而不是可視窗口？

回答

相關問題