为什么未应用以下代码中 'text' 块的 CSS 属性？

Question

我正在尝试通过 Javascript 创建 div 元素，并通过 CSS 向它们添加属性。

有两个属性：

一个用于背景。这工作正常。
一个用于文本。我正在尝试通过创建的 div 元素的 id 向它添加属性，就像我向背景添加属性一样。但由于某些原因，“TEXT”没有显示。

我已将问题缩小到 diva.id="text";。但是我不确定它有什么问题。

//grey block
var div=document.createElement('div');
div.id="overlay";
document.body.appendChild(div);
document.getElementById("overlay").style.display = "block";

//text
var diva=document.createElement('div');
diva.id="text";
var text= document.createTextNode('TEXT');
diva.appendChild(text);
document.body.appendChild(diva);

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

#text {
  position: absolute;
  color: white;
}

Answer 1

问题在于元素重叠，并且您在 #overlay 元素上有 z-index: 2，这意味着它比默认值更接近查看者。但另一个是默认距离。由于 #overlay 不是透明的，它完全隐藏了 #text 元素。

在这里你可以看到如果我将 z-index: 2 添加到 #text 会发生什么，仅作为示例：

//grey block
var div=document.createElement('div');
div.id="overlay";
document.body.appendChild(div);
document.getElementById("overlay").style.display = "block";

//text
var diva=document.createElement('div');
diva.id="text";
var text= document.createTextNode('TEXT');
diva.appendChild(text);
document.body.appendChild(diva);

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

#text {
  position: absolute;
  color: white;
  z-index: 2;
}

战斗 z-indexs 通常不是你想要的，虽然（尽管有时它是）。您可能想要以不同的方式构建事物，以便两个元素默认为同一层或类似层。

为什么未应用以下代码中 'text' 块的 CSS 属性？

Why is the CSS attribute for 'text' block in the below code not being applied?

html

javascript

css

attributes