Javascript CSS z索引不起作用（使用相对定位，使用顶部和左侧）

我有以下代码使“b”（div）位于“moretext”（文本节点）之上：

JavaScript、HTML和输出：

函数InsertDetails（）{
document.getElementById（“UI幻灯片内容”）.focus（）；
var HTMLToInsert=“div”；
变量sel、范围、html；
var text=HTMLToInsert；
if（window.getSelection）{
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
range.insertNode（document.createTextNode（“更多文本”）；
var b=document.createElement（“div”）；
b、 style.zIndex=“2”；
b、 style.position=“relative”；
b、 style.backgroundColor=“浅灰色”；
b、 appendChild（document.createTextNode（“详细信息”）；
b、 style.padding=“5px”；
range.insertNode（b）；
var a=document.createElement（文本）；
a、 setAttribute（“onclick”、“DetailsSwitch（this）；”；
a、 style.backgroundColor=“buttonFace”；
a、 innerHTML=“▼；摘要”；
a、 style.padding=“5px”；
range.insertNode（a）；
}
}else if（document.selection&&document.selection.createRange）{
//MessageBox（“功能不受支持”，“此功能在Internet Explorer中不起作用”）；
}
}
功能详细信息开关（a）{
var allDivs=document.getElementsByTagName（“div”）；
var c=0；
var d=a；
var e=null；
而（c

UI幻灯片内容
插入详细信息窗格

，即使此

z索引仅适用于定位元素（位置：绝对， 位置：相对，或位置：固定）

…唯一的W3代码示例使用

position:absolute

。因此，我们不能使用

position:relative

将元素堆叠在彼此的顶部

参见2015年10月CSS 3工作组规范中的示例16：

---

下面是一个示例，它说明了如何使用

位置：绝对；

将浅灰色框定位在深灰色按钮上，您的“更多文本”在Y轴上向下移动–因此z-index在这方面自然不会起任何作用。如果您希望它保持原位，则需要定位“详细信息”绝对正确，因为这将使其脱离流，从而不再影响以下元素的位置。您的上z索引定义在哪里？我看到一个默认值“2”，我假设它是低值。上值应该高出10级。@CBroe。此代码有几个问题需要解决。我建议重新编写-从头开始编码。DOM将不能正常使用此代码，并且存在z索引冲突的问题。@Sparky256：是的，但我的目的不是对代码质量发表评论，只是向OP解释他们在哪里误解了z索引实际做了什么（以及没有做什么）understand@CBroe。我只是建议，要使这段代码正常工作，需要的不仅仅是z索引修复。OP还需要了解DOM。CSS3手册声明，只有位置：fixed；（像工具栏）或位置：absolute；（在滚动页面后）允许移动或隐藏div或具有可调整的z索引。如果对象占用相同的空间和z索引，则可能会发生冲突。在编写了10行的数千行css后，我对此非常清楚。当然，z索引适用于具有

位置：relative

的元素–这是明确指定的：“适用于：定位元素”，：“如果元素的position属性的值不是static，则称其为定位元素。”…唯一的W3代码示例使用position:absolute”–一个例子并不一定要涵盖所有的可能性；这就像说外星人来到地球，绑架了一个男性–然后从这个例子/例子推断，地球上所有的人口都是男性。我很想看到Chrome以这种方式工作，但到目前为止还没有。没有例子说明Chrome开发者应该如何工作阅读并思考一下，他们可能没有意识到他们需要构建Chrome来使用z-index和

position:relative；

，

position:fixed；

，等等…所以现在我们只能使用

position:absolute；

，直到他们在将来的更新中更正Chrome。不知道你在说什么。在相对p上使用z-indexPositioned元素在Chrome-proof中工作得非常好：这从一开始就起作用了——无需等待“更好的未来”…