キャンバスの上のボタン

私はキャンバスを持っており、そのキャンバス上にCSSを使ってhtml要素を配置したいと考えています。ページ全体のサイズを変更して、現在このコードを持っているとき、キャンバスにボタンを残しておきます。キャンバスの上のボタン

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

出典

2017-05-12 CarlosIsLazy

[ドキュメントフローでスペースを占めることなく要素を相対的に配置]（http://stackoverflow.com/questions/6040005/relatively-position-an-element-without-it-taking-up-space） -in-document-flow） –

上記の複製を参照して、ボタンとキャンバスをコンテナに配置し、前述のアプローチを使用して、キャンバスの上に相対的に配置します。ボタンが一番上にあることを確認するために、それぞれに「z-index」を定義します*）。 –

を変更してみてください。ここでは、それはあなたがキャンバスheightとwidthと同じにcanvas-containerのwidthとheightを設定する必要が

.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>

をどのように動作するかであるそうでない場合は、ボタンの位置が変更されます。

出典

2017-05-12 21:07:30 azs06

あなたは私に何か新しいことを教えて、問題を解決しました。ありがとうございました – CarlosIsLazy

新しいことを学んだことをうれしく思います。それがあなたに役立った場合は、正解として選択してください。 – azs06

あなたがcanvasとbuttonの両方のための追加の容器を使用することによって、これを達成することができます#canvasposition: relative;へ

出典

2017-05-12 18:58:01

これは答えではありません。 – AvrilAlejandro

キャンバスの上のボタン

答えて

関連する問題