在畫布上方的按鈕

所以我有一個畫布，我想要使用css在該畫布上放置一個html元素。當你調整整個頁面的大小時，我希望按鈕保留在畫布中，而且目前我有這個代碼。在畫布上方的按鈕

#button {position:absolute; top:40%; left:30%;}

來源

2017-05-12 CarlosIsLazy

[相對位置沒有佔用文檔流中的空間的元素]（http://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-ta-to-up-space -in-document-flow） –

引用所提到的副本，把你的按鈕和畫布放在一個容器中，然後使用上面提到的方法將它放置在畫布的頂部，而不佔用文檔中的空間（*您可能想要爲每一個定義'z-index'確保按鈕位於頂部*）。 –

您可以通過使用一個額外的容器用於canvas和button實現這一目標。下面是它如何工作

.canvas-container{ 
 
    position: relative; 
 
    width: 500px; 
 
    height: 500px; 
 
} 
 
#canvas { 
 
    position: absolute; 
 
    background-color:lightgrey 
 
} 
 
#button { 
 
    position:absolute; 
 
    left:30%; 
 
    top:40% 
 
}

<div class="canvas-container"> 
 
<canvas id='canvas' width='500px' height='500px'></canvas> 
 
<button id='button'>Whats up</button> 
 
</div>

你必須設置canvas-container的width和height以相同的畫布height和width否則按鈕的位置會發生變化。

來源

2017-05-12 21:07:30 azs06

你剛剛教會了我一些新東西，並解決了這個問題。謝謝 – CarlosIsLazy

太棒了，很高興你學到了新的東西。確保選擇正確的答案，如果它幫助你。 – azs06

嘗試改變#canvas到position: relative;

來源

2017-05-12 18:58:01

這不是一個答案。 – AvrilAlejandro

在畫布上方的按鈕

回答

相關問題