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 not working with relative positioning）

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

然而，我尝试了这两个，但没有成功。

有人请帮帮我吗？提前谢谢。

Answer 1

即使some websites claim这个......

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

...唯一的W3代码示例使用position:absolute。所以我们不能使用position:relative来使元素堆叠在一起。

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

以下是jsFiddle，其中说明了如何使用position:absolute;

将浅灰色框放置在深灰色按钮上

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

1 个答案: