Как я могу положить два элемента холста друг на друга? - PullRequest
Новая
       4

Как я могу положить два элемента холста друг на друга?

1 голос
/ 31 марта 2019

Я хочу положить два элемента холста друг на друга.Я пробовал это, но они всегда появляются один под другим.Холст с id canvas1 должен быть нижней плоскостью, а 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;
}

1 Ответ

0 голосов
/ 31 марта 2019

Я добавил свойство позиции к #canvas1 и использовал свойство 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...