javascript - WordPress 中自定义 HTML block 的问题

Question

我正在开发一个网站，并使用 HTML、CSS 和 JavaScript 添加了自定义 HTML block 。但在 View 页面中它仍然位于另一个内容后面。不知道为什么会这样。

Red arrow is the custom HTML
The custom HTML block inside wordpress

body {
  background-color: #eee; 
}
#canvas1{
  background-color: #fff;
  border: 1px solid #ccc;
}
.slider {
  width: 400px;
  color: #ccc;
}
.wrapper {
  position:relative;
}
.wrapper > canvas,
.wrapper > input {
  position:absolute;
  left:50px;
  top:50px;
}
.wrapper > input {
  left:150px !important;    /* places the slider */
  top:450px;
}

<div class="wrapper">
  <canvas id = 'canvas1' style="margin:0 auto;display:block;" width="600" height="500"><p>Your browser does not support html5 canvas.</p></canvas>
  <input id="volume" class="slider" type=range min=0 max=199 value=0 oninput='realTime(this)'>
</div>

//in this instance, canvas1 is an 800x800 canvas element
var context = document.getElementById('canvas1').getContext('2d');

context.font = '16px Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif';
context.fillStyle = "#4D5C6D";
// a + b = width
var width = 200;
var focal = 0;
var timer = setInterval(function() {
  drawEllipse(300, 250)
}, 100);

function realTime(obj) {
  clearInterval(timer);
  focal = obj.value;
  drawEllipse(300, 250);
  context.fillStyle = "#BBB";
  context.fillRect(18, 145, 160, 20);
  context.fillStyle = "#FFF";
  context.fillText("Clique para reiniciar", 25, 160);
  context.fillStyle = "#4D5C6D";
}

function drawEllipse(centerX, centerY) {
  context.clearRect(0, 0, 600, 500);
  var height = Math.sqrt((width * width) - (focal * focal));
  var eccen = ((focal) / (width));

  context.fillText("Excentricidade = " + eccen.toFixed(2), 20, 40);
  context.fillText("Largura Focal = " + focal, 20, 70);
  context.fillText("Maior Eixo = " + width, 20, 100);
  context.fillText("Menor Eixo = " + height.toFixed(2), 20, 130);
  context.fillRect(centerX - (focal / 2.0), centerY, 2, 2);
  context.fillRect(centerX + (focal / 2.0), centerY, 2, 2);
  volume.value = focal;

  var a = width / 2.0;
  var b = height / 2.0;
  for (var t = 0; t < 360; t++) {
    var theta = t * Math.PI / 180;
    context.fillRect(centerX + a * Math.cos(theta), centerY + b * Math.sin(theta), 2, 2);
  }
  focal++;
  if (focal >= 200) {
    clearInterval(timer);
    context.fillStyle = "#BBB";
    context.fillRect(18, 145, 145, 20);
    context.fillStyle = "#FFF";
    context.fillText("Clique para repetir", 25, 160);
    context.fillStyle = "#4D5C6D";
  }
}
document.getElementById('canvas1').addEventListener('click', function() {
  clearInterval(timer);
  focal = 0;
  timer = setInterval(function() {
    drawEllipse(300, 250)
  }, 50);
});

此 HTML 包含椭圆偏心率的模拟。

Answer 1

我不确定您想在这里实现什么目标。

我认为如果你想选择哪个 View 位于哪个 View 之上，请尝试将 z-index 添加到 css 样式中。 z-index 值越高， View 就越高。