Question

我试图在div内创建一个名为“ board”的表格，但它最终以某种方式最终出现在其下方。该表的内容是用Javascript创建的。在文章的底部，我有一个JSFiddle链接，希望可以阐明我的意思。

HTML

<head>
  <link rel="stylesheet" type="text/css" href="testclass.css">
</head>

<script src="testclass.js" defer></script>

<center>
  <div id="board">
    <table id="table">
    </table>
  </div>
</center>

CSS

.empty {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

JavaScript

let board = document.getElementById("board");
let table = document.getElementById("table");

let element = document.createElement("BUTTON");
element.innerHTML = "TEXT SHOULD BE BELOW THE SQUARE";
board.appendChild(element);

var br = document.createElement("br");
board.appendChild(br);

var info = document.createTextNode("This text should also be below the SQUARE");
board.appendChild(info);

var type = " empty";

var tr = document.createElement("tr");

var td = document.createElement("td");

table.append(tr);

td.className = type;

tr.append(td);

var td2 = document.createElement("tr");

tr.append(td2);

MCVE：https://jsfiddle.net/pycuoghw/13/

Answer 1

一种解决方案可能是将绝对位置放在中心标签中

let board = document.getElementById("board");
let table = document.getElementById("table");

let element = document.createElement("BUTTON");
element.innerHTML = "TEXT SHOULD BE BELOW THE SQUARE";
board.appendChild(element);

var br = document.createElement("br");
board.appendChild(br);

var info = document.createTextNode("This text should also be below the SQUARE");
board.appendChild(info);

var type = " empty";

var tr = document.createElement("tr");

var td = document.createElement("td");

table.append(tr);

td.className = type;

tr.append(td);

var td2 = document.createElement("tr");

tr.append(td2);

center {
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.empty {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

<head>
  <link rel="stylesheet" type="text/css" href="testclass.css">
</head>

<script src="testclass.js" defer></script>

<center>
  <div id="board">
    <table id="table">
    </table>
  </div>
</center>

HTML表最终在div之外

1 个答案: