Элементы не позиционируются абслоютно

Question

Мне нужно, чтобы div находился поверх canvas, и оба они никак не влияли на расположение друг друга, т.е. оба были привязаны к левому верхнему углу экрана, однако div смещает canvas вниз, как если бы CSS не был привязан.

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#canvas {
  position: absolute;
  border: 2px solid black;
}

#orientationWarning {
  position: absolute;
  border: 2px solid red;
}

<body>
  <div id="orientationWarning">
    <h1>Поверните экран горизонтально!</h1>
  </div>
  <canvas id="canvas">123</canvas>
</body>

Answer 1

Вот ваш пример, все работает: немного js для canvas

Может путь неверный у вас до css?

window.onload = function() {
  var drawingCanvas = document.getElementById('canvas');
  if (drawingCanvas && drawingCanvas.getContext) {
    var context = drawingCanvas.getContext('2d');
    // Рисуем окружность 
    context.strokeStyle = "#000";
    context.fillStyle = "#fc0";
    context.beginPath();
    context.arc(100, 100, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
    // Рисуем левый глаз 
    context.fillStyle = "#fff";
    context.beginPath();
    context.arc(84, 90, 8, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
    // Рисуем правый глаз 
    context.beginPath();
    context.arc(116, 90, 8, 0, Math.PI * 2, true);
    context.closePath();
    context.stroke();
    context.fill();
    // Рисуем рот
    context.beginPath();
    context.moveTo(70, 115);
    context.quadraticCurveTo(100, 130, 130, 115);
    context.quadraticCurveTo(100, 150, 70, 115);
    context.closePath();
    context.stroke();
    context.fill();
  }
}

html,
body {
  width: 100%;
  height: 100%;
  position: relative;
}

#canvas {
  position: absolute;
  border: 1px solid black;
}

#orientationWarning {
  position: absolute;
  border: 1px solid red;
}

<div id="orientationWarning">
  <h1>Поверните экран горизонтально!</h1>
</div>
<canvas id="canvas" width="300" height="300"></canvas>

БЛОГ НА HUSL

Элементы не позиционируются абслоютно

Ответы (1 шт):