Question

我想在彼此上方放置两个画布元素。我已经尝试过了，但是它们总是一个出现在另一个下面。 ID为canvas1的Canvas应该是下平面，而canvas2应该是上平面。

<div class="container">
    <canvas class="canvas" id="canvas1" width="500" height="500"></canvas>
    <canvas class="canvas" id="canvas2" width="500" height="500"></canvas>
</div>

.container {
  display: inline-block;
  position: relative;
  float: left;
}

#canvas1,
#canvas2{
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}

Answer 1

我向#canvas1添加了position属性，并使用了z-index属性。 z-index越高，将显示越高。您所需要做的就是使顶部的z-index高于底部的z-index。

#canvas1 {
  position: relative;
  background: black;
  z-index: -1;
}
#canvas2{
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 0;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<div class="container">
    <canvas class="canvas" id="canvas1" width="500" height="500"></canvas>
    <canvas class="canvas" id="canvas2" width="500" height="500"></canvas>
</div>

</body>
</html>

如何将两个画布元素彼此重叠放置？

1 个答案: