CSS z-index不起作用（使用相对定位，使用顶部和左侧）

Question

我有以下代码使“ b”（div）超出“更多文本”（“文本”节点）：

JavaScript，HTML和输出：

 function InsertDetails() { document.getElementById("UI-Slide-Content").focus(); var HTMLToInsert = "div"; var sel, range, html; var text = HTMLToInsert; if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); range.insertNode(document.createTextNode("More text")); var b = document.createElement("div"); b.style.zIndex = "2"; b.style.position = "relative"; b.style.backgroundColor = "lightGray"; b.appendChild(document.createTextNode("Details")); b.style.padding = "5px"; range.insertNode(b); var a = document.createElement(text); a.setAttribute("onclick", "DetailsSwitch(this);"); a.style.backgroundColor = "buttonFace"; a.innerHTML = "&#9660;&nbsp;Summary"; a.style.padding = "5px"; range.insertNode(a); } } else if (document.selection && document.selection.createRange) { //MessageBox("Feature Not Supported", "This feature does not work in Internet Explorer."); } } function DetailsSwitch(a) { var allDivs = document.getElementsByTagName("div"); var c = 0; var d = a; var e = null; while (c < allDivs.length) { if (allDivs[c] == d) { e = allDivs[c + 1]; } c++; } if (e.style.display == "block") { e.style.display = "none"; d.innerHTML = d.innerHTML.replace("▼&nbsp;", "▶&nbsp;"); } else { e.style.display = "block"; d.innerHTML = d.innerHTML.replace("▶&nbsp;", "▼&nbsp;"); } } 

 <div id="UI-Slide-Content" contenteditable style="border: 1px solid black; width: 100%; height: 100%;">UI-Slide-Content</div> <button onclick="InsertDetails();">Insert Details Pane</button> 

尝试单击“插入详细信息窗格”按钮，这将插入一个用户可以编辑的详细信息窗格（不使用本地HTML <details/>标签）。 我希望使细节显示在“摘要”框下方（在y轴上）和“更多文本”文本节点上方（在z轴上）。

但是，那是行不通的。 窗格打开时，“更多文本”将下移。 我希望通过使用z-index使详细信息窗格的详细信息框位于“更多文本”上方，以使“更多文本”不动。 这是行不通的。

我读过很多与此类似的问题，并且发现

使用'top'和'left'属性可以提供帮助（ CSS z-index不适用于相对定位 ）

使用相对定位也可能有帮助（另一个问题）

但是后来，我尝试了这两种方法，但没有成功。

有人可以帮我吗？ 提前致谢。

Answer 1

即使某些网站声称这...

z-index仅适用于定位的元素（position：absolute，position：relative或position：fixed）

...唯一的W3代码示例使用position:absolute 。 因此，我们不能使用position:relative使元素相互堆叠。

请参阅2015年10月以来的CSS 3 WG规范中的示例16： https : //drafts.c​​sswg.org/css-position/#propdef-z-index

这是一个jsFiddle ，它说明了如何使用position:absolute;将浅灰色框定位在深灰色按钮上方position:absolute;