CSSのZインデックス機能しない（相対的な位置は、トップ、使用および使用左）

Question

I（DIV）「その他のテキスト」（テキストノード）上に行く「b」を作るために、次のコードを持っている：

の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 = "▼ 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軸上）の上に詳細を表示することを希望します。

しかし、それは動作しません。ペインが開いているときに 'More text'が下にシフトします。詳細ペインの詳細ボックスをz-indexを使用して「その他のテキスト」の上に移動させることによって、「その他のテキスト」を移動させたくないということです。それは動作しません。

Iこれに似た多くの質問を読んでいると、「トップ」を使用して

ことを見出したと「left'attributesは助けることができる（CSS z-index not working with relative positioning）

相対位置を使用することも（別のを助けるかもしれません質問）

しかし、私はこれらの2つを試みましたが、成功しませんでした。

誰かが私を助けてくれるかもしれませんか？前もって感謝します。

Answer 1

にもかかわらずsome websites claimこの...

z屈折率のみ位置決め要素上の動作（位置：絶対、 位置：相対、又は位置：固定）

を... W3コードの例ではposition:absoluteしか使用していません。したがって、要素を互いに重ね合わせるためにposition:relativeを使用することはできません。

2015年10月からCSS 3 WG仕様で例16を参照してください：ここでhttps://drafts.csswg.org/css-position/#propdef-z-index

は、ライトグレーのボックスがposition:absolute;