0

解決できない奇妙な問題があります。と の関係について読んだ他の問題と同じように見えるはずですが、これは別のことです。これをすべて説明しましょう：

まず、私はこのコードで作業しています。これは次のように機能します。

<canvas id="canvas" width="1068" height="814" style="position: absolute; top: 0px; left: 0px; border:1px solid #707070; z-index:-15;">
Tu browser no soporta canvas
</canvas>

<div id="contenedorpregunta" style="background-color: transparent; position: absolute; top: 170px; left: 110px; width: 500px; height: 455px; z-index:5;">
(...)
</div>

これは、期待どおりにキャンバス上に div コンテンツを示しており、両方とも 0,0 にアタッチされています。

代わりに、Web ページを中心にゲームを表示する必要があるので、これで考えました。

<div align="center">
  <canvas style="position: relative;  (...)">
  </canvas>

  <div id="contenedorpregunta" style=" position: relative;(...)">
  </div>
</div>

これは機能していません。以前はキャンバス上にあった div が現在はすぐ後ろにあります... ¿ 継承ポジショニングも試してみましたが、結果は同じです。この問題の対処方法がわかりません。ご協力いただけると大変助かります。

4

1 に答える 1

0

Web ページのコンテナ div を水平方向の中央に配置する場合は、コンテナ要素に幅を指定して使用するmargin: auto;だけで十分です。水平方向だけでなく垂直方向の中央にも配置する場合は、position: absolute;

.totally_centered {
   height: 500px;
   width: 300px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin-top: -250px; /* Half of container height */
   margin-left: -150px; /* Half of container width */
}

なぜdivが遅れたのか混乱している場合でも、なぜ遅れたのか、どのように遅れたのかわかりませんがz-index、要素のスタックレベルを再配置するために使用できます

于 2013-02-08T11:49:30.047 に答える