CSS z-index nicht funktioniert (relative Positionierung verwendet, oben und verwendete links)

Question

Ich habe den folgenden Code 'b' (div) geht über 'Mehr Text' (Text-Knoten) zu machen:

JavaScript, HTML und Ausgang:

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>

Versuchen Sie, auf ‚einfügen Detailfenster‘ klicken, und dies würde Legen Sie einen Detailbereich (nicht mit nativen HTML <details/>-Tag), dass der Benutzer bearbeiten kann. Ich möchte, dass die Details unter dem Feld "Zusammenfassung" (auf der Y-Achse) und über dem Textknoten "Mehr Text" (auf der Z-Achse) angezeigt werden.

Aber dann funktioniert es nicht. 'Mehr Text' wird nach unten verschoben, wenn das Fenster geöffnet ist. Ich möchte, dass mehr Text nicht verschoben wird, indem Sie das Detailfeld des Detailbereichs über den "Mehr Text" mit z-index setzen. Es funktioniert nicht.

Ich habe viele ähnliche Fragen wie diese zu lesen, und haben herausgefunden, dass

‚top‘ mit und ‚left'attributes (CSS z-index not working with relative positioning)

mit relativen Positionierung auch ein anderes helfen kann helfen kann (Frage)

Aber dann habe ich diese beiden versucht, aber ohne Erfolg.

Kann mir bitte jemand helfen? Danke im Voraus.

Answer 1

Obwohl diese some websites claim ...

z-Index funktioniert nur auf positionierte Elemente (Position: absolute, Position: relative oder Position: fixed)

... der Nur das W3-Codebeispiel verwendet position:absolute. Daher können wir position:relative nicht verwenden, um Elemente übereinander zu stapeln.

Siehe 16 Beispiel in dem CSS 3 WG Spec ab Oktober 2015: https://drafts.csswg.org/css-position/#propdef-z-index

hier ein jsFiddle ist, die zeigt, wie das Licht graue Feld über den dunkleren grauen Knopf positioniert werden, position:absolute;