同心正方形外层顶部文本对齐及避免遮挡内层元素问题咨询

问题根因 #

• 直接给.grandparent赋值innerHTML会直接覆盖内部原有的parent、child节点，这是内层正方形消失的核心原因，和z-index无关
• CSS属性存在两处书写错误：flex布局垂直顶部对齐的有效值是align-items: flex-start而非top；z-index的属性赋值语法错误，应为z-index: 0而非z-index=0
• 全局为所有div设置了默认水平方向的flex居中，.grandparent需要改为垂直方向的flex布局，才能实现顶部文本、下方嵌套正方形的排列效果

修正后代码 #

HTML

<div class="grandparent">
  <!-- 新增专门存放顶部提示文本的节点，避免覆盖原有子元素 -->
  <span class="tip"></span>
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

CSS

body {
  margin: 0;
  min-height: 100vh;
}
body,
div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.grandparent {
  width: 200px;
  height: 200px;
  background-color: red;
  /* 改为垂直方向flex布局 */
  flex-direction: column;
  /* 垂直方向顶部对齐 */
  justify-content: flex-start;
  padding-top: 10px;
  gap: 20px; /* 控制顶部文本和内层正方形的间距 */
}
.parent {
  width: 130px;
  height: 130px;
  background-color: blue;
}
.child {
  width: 60px;
  height: 60px;
  background-color: green;
}

JavaScript

var x = window.prompt("Enter a value of X ");
// 对输入值做数值转换，避免字符串拼接问题
var square = x => Number(x) * Number(x);
console.log("The value of square is: " + square(x));
// 给专属文本节点赋值，不覆盖子元素
document.querySelector(".tip").innerText = `Enter the value of x: ${x}`;
document.querySelector(".child").innerText = square(x);

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