1

HTML5 キャンバスを別のキャンバスの上に表示する必要があります。これは、次の方法ですでに管理しています。

<canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="upper" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

ただし、これら2つのキャンバスを中央に配置しながら、一方を他方の上に配置する方法がわかりません。何か案は？

4

3 に答える 3

1

text-align:centerとで外側の容器をposition:relative作り、 で内側の容器を作り、内側の容器position:relativeの中にキャンバスを入れ、left:0;top:0;両方のキャンバスを取り除き、position:absoluteキャンバスの下の を取り除きます。そして、あなたが持っているように、下のキャンバスが上のキャンバスの前に来ることをhtmlで確認してください。

#container {
  text-align:center;
  position:relative;
}

#inner_container{
  position:relative;
}
#upper {
  z-index: 1;
}
#lower {
  position:absolute; z-index: 0;
}

http://jsfiddle.net/NW6Fx/

編集：このようにすれば、 z-index プロパティは必要ないと思います。順序は、html でどのキャンバスが最初に来て、どちらがposition:relative.

于 2013-06-27T17:09:53.733 に答える
0

それらの間にブレークラインを置くことができます<br/>

また

それらのそれぞれに次のcssを与えようとするかもしれません:

{
    margin:auto;
    clear:both;
}

絶対配置では、top を使用する必要があります。たとえば、最初のものについては、 put top: 50px. これにより、最初の要素が上から 50px離れます。2 つ目はtop: 100px.

于 2013-06-27T16:57:24.850 に答える