如何解决P5.js中输入框被Div元素遮挡的问题？

问题描述 #

刚接触P5.js，希望创建一个可隐藏的输入框，显示时位于带文本的Div中，但目前Div绘制在输入框（newSupportDistance）前方，调用.show()方法无法将输入框置于上层。

相关代码 #

JavaScript代码 #

let borderHeight = 800;
let borderWidth = 1500;
let fixedSupportArray = [];
let rollingSupportArray = [];
let verticalForces = [];
let moments = [];
let wallSupports = [false, false];
var simpleSupportDiv;
var wallSupportDiv;
var simpleSupportDivShown = false;
var wallSupportDivShown = false;

function setup() {
  createCanvas(borderWidth, borderHeight);

  // default values
  let beamLength = 5;

  // creating border lines
  strokeWeight(4);
  stroke(0);
  fill(220);
  rect(0,0,borderWidth,borderHeight);

  // creating title
  fill(0);
  textSize(32);
  strokeWeight(1);
  text("Static Beam Analysis",borderWidth/2-150,40);

  // creating input texts
  textSize(16);
  strokeWeight(0);
  text("Enter Beam Length",10,25);
  text("Select Support Type",10,75);
  text("Select Force Type",10,220);

  // creating input fields
  beamLengthInput = createInput('5');
  beamLengthInput.position(155,12);
  beamLengthInput.size(32,14);

  beamLengthUnitsInput = createSelect();
  beamLengthUnitsInput.position(202,12);
  beamLengthUnitsInput.size(35,20);
  beamLengthUnitsInput.option("km");
  beamLengthUnitsInput.option("m");
  beamLengthUnitsInput.option("cm");
  beamLengthUnitsInput.option("mm");
  beamLengthUnitsInput.selected("m");

  supportTypeInput = createSelect();
  supportTypeInput.position(170,60);
  supportTypeInput.size(140,20);
  supportTypeInput.option("None");
  supportTypeInput.option("Rolling Support");
  supportTypeInput.option("Fixed Support");
  supportTypeInput.option("Wall Support");
  supportTypeInput.selected("Rolling Support");

  newSupportDistance = createInput('0');
  newSupportDistance.position(50,130);
  newSupportDistance.size(40,12);

  //creating input Divs
  simpleSupportDiv = createDiv('<p>Enter support distance x from left side<p>');
  simpleSupportDiv.position(20,95);
  simpleSupportDiv.size(300,100);
  simpleSupportDiv.class('inputDiv');
  
  wallSupportDiv = createDiv("   Enter the side of the support");
  wallSupportDiv.position(20,95);
  wallSupportDiv.size(300,100);
  wallSupportDiv.class('inputDiv');

  // drawing beam
  fill('#27D1EB');
  strokeWeight(2);
  rect(400,350,borderWidth-800,100);
  line(400,570,400+borderWidth-800,570);
}

function draw() {
  // total length line
  strokeWeight(0);
  fill(0);
  textSize(16);
  text(beamLengthInput.value().concat(" ".concat(beamLengthUnitsInput.selected())),borderWidth/2-10,595);

  // changing displayed div for inputs
  if (supportTypeInput.value() == "Rolling Support" || supportTypeInput.value() == "Fixed Support") {
    if (simpleSupportDivShown == false) {
      simpleSupportDiv.show();
      wallSupportDiv.hide();
      simpleSupportDivShown = true;
      wallSupportDivShown = false;
    }
    newSupportDistance.show()
  }
  else if (supportTypeInput.value() == "Wall Support") {
    if (wallSupportDivShown == false) {
      simpleSupportDiv.hide();
      wallSupportDiv.show();
      wallSupportDivShown = true;
      simpleSupportDivShown = false;
    }   
  }
  else {
    simpleSupportDiv.hide();
    wallSupportDiv.hide();
    wallSupportDivShown = false;
    simpleSupportDivShown = false;
  }
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

解决方法 #

问题根源是DOM元素的创建顺序决定层级：P5.js中后创建的元素默认z-index更高，会覆盖先创建的元素。你先创建了newSupportDistance输入框，之后才创建Div，导致Div盖住输入框。以下三种方案任选：

方案1：调整元素创建顺序 #

把输入框的创建代码移到Div之后，让输入框成为后创建的元素，自然处于上层：

// 先创建Div
simpleSupportDiv = createDiv('<p>Enter support distance x from left side<p>');
simpleSupportDiv.position(20,95);
simpleSupportDiv.size(300,100);
simpleSupportDiv.class('inputDiv');

wallSupportDiv = createDiv("   Enter the side of the support");
wallSupportDiv.position(20,95);
wallSupportDiv.size(300,100);
wallSupportDiv.class('inputDiv');

// 再创建输入框
newSupportDistance = createInput('0');
newSupportDistance.position(50,130);
newSupportDistance.size(40,12);

方案2：手动设置z-index层级 #

如果不想调整创建顺序，直接给输入框设置更高的z-index值，强制让它处于上层：

newSupportDistance = createInput('0');
newSupportDistance.position(50,130);
newSupportDistance.size(40,12);
// 设置z-index为10（大于Div默认的层级）
newSupportDistance.style('z-index', '10');

方案3：将输入框嵌套进Div（推荐） #

把输入框作为Div的子元素，这样输入框会和Div绑定，既不会被遮挡，也能跟着Div一起显示/隐藏：

// 创建Div
simpleSupportDiv = createDiv('<p>Enter support distance x from left side<p>');
simpleSupportDiv.position(20,95);
simpleSupportDiv.size(300,100);
simpleSupportDiv.class('inputDiv');

// 创建输入框并设置父元素为Div
newSupportDistance = createInput('0');
newSupportDistance.parent(simpleSupportDiv); // 关键：指定父容器
newSupportDistance.position(30, 40); // 此处坐标为Div内部的相对位置

// 同理处理wallSupportDiv...

内容的提问来源于stack exchange，提问作者Joseph Manning