Wordpress 中自定义 HTML 块的问题答案

【问题标题】：Problem with custom HTML block in WordpressWordpress 中自定义 HTML 块的问题
【发布时间】：2020-03-05 14:45:43
【问题描述】：

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

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 包含椭圆偏心率的模拟。

【问题讨论】：

如果将 .wrapper > 输入的位置更改为相对而不是绝对会发生什么？
欢迎来到stackoverflow Felipe。你的 .wrapper 类有一个position: absolute。因此，它将内容从页面流中分离出来，并将其置于现有内容之上。尝试删除绝对值，并依靠position: relative。
@TimWilson 和 Jeff Vdovjak，你是对的！这解决了问题。非常感谢！从现在开始，我对这个社区感到震惊。

标签： javascript html css wordpress

【解决方案1】：

我不确定你想在这里实现什么。

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

【讨论】：

谢谢陈！问题是整个自定义块。我将 .wrapper > input 更改为 relative 而不是 absolut 并解决了问题。再次感谢！

【解决方案2】：

Tim Wilson 和 Jeff Vdovjak 给出了答案。我只是将 .wrapper > 输入更改为相对。

.wrapper > input {
    position:relative;

他们的答案：

Tim Wilson：如果将 .wrapper > 输入的位置更改为相对而不是绝对会发生什么？

Jeff Vdovjak：欢迎来到 stackoverflow Felipe。您的 .wrapper 类有一个位置：绝对。因此，它将内容从页面流中分离出来，并将其置于现有内容之上。尝试删除绝对值，并依赖位置：relative.**

谢谢你们！

【讨论】：