CSS z-index Not Functioning (relative positioning used, top and left used)

Question

I have the following code to make 'b' (div) go above 'More text' (Text node):

JavaScript, HTML and Output:

 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> 

Try clicking on the 'Insert Details Pane' button, and this would insert a details pane (not using native HTML <details/> tag) that the user can edit. I desire to make the details show up below the 'Summary' box (on the y-axis) and above the 'More text' text node (on the z-axis).

But then, it does not work. 'More text' gets shifted down when the pane is open. I desire to have 'More text' not move by making the details pane's details box go above the 'More text' using z-index . It does not work.

I have read many questions similar to this, and have found out that

using 'top' and 'left'attributes can help ( CSS z-index not working with relative positioning )

using relative positioning may also help (another question)

But then, I tried these two, but without success.

May someone please help me? Thanks in advance.

Answer 1

Even though some websites claim this...

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

... the only W3 code example uses position:absolute . So we can't use position:relative to get elements to stack on top of each other.

See example 16 in the CSS 3 WG Spec from October 2015: https://drafts.csswg.org/css-position/#propdef-z-index

Here is a jsFiddle which illustrates how the light gray box can be positioned over the darker gray button, using position:absolute;