堆叠两个div，每个div都有一个画布

时间：2022-01-04 11:59:50

This is massively oversimplified but this is essentially what I have:

这是大大过分简化,但这基本上是我所拥有的:

<html>
    <body>
        <div id="div1" style="width: 581px; height: 643px;">
            <div id="div2" style="position: relative; width: 581px; height: 643px; background-image: url("bg.jpg"); background-size: 100% 100%;">
                <div id="div3" style="position: absolute; width: 581px; height: 643px;">
                    <canvas id="canvas1" width="640" height="960" style="z-index: 0; width: 428.667px; height: 643px; transform: translateX(76.1667px) translateY(0px);"></canvas>
                </div>
                <div id="div4" style="position: absolute; width: 581px; height: 643px;">
                    <canvas id="canvas2" width="640" height="960" style="z-index: 1; width: 428.667px; height: 643px; transform: translateX(76.1667px) translateY(0px);"></canvas>
                </div>          
            </div>
        </div>
    </body>
</html>

The elements 'div3' and 'div4' are positioned in the same place - however, the content of 'canvas2' is always being shown above 'canvas1'. I have tried setting the z-index of div3 and div4 but so far to no avail.

元素'div3'和'div4'位于相同的位置 - 但是,'canvas2'的内容始终显示在'canvas1'上方。我试过设置div3和div4的z-index,但到目前为止无济于事。

What could be happening here?

这可能会发生什么?

Thanks

1 个解决方案

#1

0  

var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.font = "30px Arial";
ctx1.textAlign = "left";
ctx1.fillText("canvas 1",canvas1.width/2, canvas1.height/2);

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.font = "30px Arial";
ctx2.textAlign = "right";
ctx2.fillText("canvas 2",canvas2.width/2, canvas2.height/2+60);
#div2{
  position: relative; 
  width: 581px; 
  height: 643px; 
  background-color: rgba(255, 0,0,0.5);
  background-size: 100% 100%;
}

#div3{
  position: absolute; 
  width: 581px; 
  height: 643px;;
}

#div4{
  position: absolute; 
  width: 581px; 
  height: 643px;
}

#canvas1{
  background-color: rgba(0,0,255,0.5);
  
  z-index: 1; 
  width: 428.667px; 
  height: 643px; 
  transform: translateX(76.1667px) translateY(0px);
  
}

#canvas2{
  background-color: rgba(0,255,0,0.5);
  
  z-index: 0; 
  width: 428.667px; 
  height: 643px;
  transform: translateX(76.1667px) translateY(0px);
}
<div id="div1" style="width: 581px; height: 643px;">
            <div id="div2">   
                <div id="div4">
                    <canvas id="canvas2" width="640" height="960"></canvas>
                </div>    
                <div id="div3">
                    <canvas id="canvas1" width="640" height="960"></canvas>
                </div>   
            </div>
        </div>

For anyone visiting , I've made a jsFiddle of the solution.

对于任何访问的人,我已经成为解决方案的一个小问题。

Just verify that all your relevant styling information is within your CSS and that the canvases are declared in your HTML in the order you wish for them to display (or muck around with the CSS to work around this, your choice).

只需验证所有相关的样式信息都在您的CSS中,并且您的HTML中按照您希望它们显示的顺序声明画布(或者使用CSS来解决这个问题,您可以选择)。

#1

0  

var canvas1 = document.getElementById("canvas1");
var ctx1 = canvas1.getContext("2d");
ctx1.font = "30px Arial";
ctx1.textAlign = "left";
ctx1.fillText("canvas 1",canvas1.width/2, canvas1.height/2);

var canvas2 = document.getElementById("canvas2");
var ctx2 = canvas2.getContext("2d");
ctx2.font = "30px Arial";
ctx2.textAlign = "right";
ctx2.fillText("canvas 2",canvas2.width/2, canvas2.height/2+60);
#div2{
  position: relative; 
  width: 581px; 
  height: 643px; 
  background-color: rgba(255, 0,0,0.5);
  background-size: 100% 100%;
}

#div3{
  position: absolute; 
  width: 581px; 
  height: 643px;;
}

#div4{
  position: absolute; 
  width: 581px; 
  height: 643px;
}

#canvas1{
  background-color: rgba(0,0,255,0.5);
  
  z-index: 1; 
  width: 428.667px; 
  height: 643px; 
  transform: translateX(76.1667px) translateY(0px);
  
}

#canvas2{
  background-color: rgba(0,255,0,0.5);
  
  z-index: 0; 
  width: 428.667px; 
  height: 643px;
  transform: translateX(76.1667px) translateY(0px);
}
<div id="div1" style="width: 581px; height: 643px;">
            <div id="div2">   
                <div id="div4">
                    <canvas id="canvas2" width="640" height="960"></canvas>
                </div>    
                <div id="div3">
                    <canvas id="canvas1" width="640" height="960"></canvas>
                </div>   
            </div>
        </div>

For anyone visiting , I've made a jsFiddle of the solution.

对于任何访问的人,我已经成为解决方案的一个小问题。

Just verify that all your relevant styling information is within your CSS and that the canvases are declared in your HTML in the order you wish for them to display (or muck around with the CSS to work around this, your choice).

只需验证所有相关的样式信息都在您的CSS中,并且您的HTML中按照您希望它们显示的顺序声明画布(或者使用CSS来解决这个问题,您可以选择)。

标签：

相关文章