在画布上方的按钮

所以我有一个画布，我想要使用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

在画布上方的按钮

回答

相关问题