相关疑难解决方法(0)

今天，经过四个小时的调试，我很难学到了这个规则：

如果父级的z-index值为任何值，则无论您如何更改子级的CSS，父级元素都永远无法覆盖（堆叠在其子级元素之上）

我如何通过逻辑理解这种行为？规范在哪里覆盖？

代码（也在CodePen中）：

.container {
  width: 600px;
  height: 600px;
  background-color: salmon;
  position: relative;
  z-index: 99;
  margin-top: 20px;
  padding-top: 10px;
}

h1 {
  background-color: pink;
  position: relative;
  z-index: -1;
  font-family: monospace;
}

<div class="container">
  <h1>1. I can never be covered by parent if my z-index is positive.</h1>
  <h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>

基本上我可以使用最基本的示例来使用Bootstrap Tour,但是当在jQuery对话框中定位元素时,高亮显示会覆盖元素.

var t = new Tour({
    backdrop: true
});

t.addStep({
    element: "#content",
    title: "Title",
    content: "Content"
});

t.start();

这是我所说的jsFiddle示例.

高亮元素应位于目标元素后面,以便文本仍然可见.

我认为问题是元素的z-index.它应该是dialog - > highlight - >元素,但它看起来像是对话框 - >元素 - >高亮显示.

对话框的z-index为100,高亮显示为1010,元素为1011,我认为应该是正确的.

我可以通过显式删除.ui-frontjQuery UI类上的z-index来使其工作,但这似乎不是最好的解决方案.

如果z-index是正确的,为什么默认样式不起作用的任何想法？

如何使堆叠顺序底部的堆叠上下文中包含的元素出现在堆叠顺序较高的不同堆叠上下文中的另一个元素的前面？

例如：

HTML：

<div class="Parent-1"></div>

<div class="Parent-2">

    <div class="pepe"></div>
    <div class="pepin"></div>

</div>

CSS：

.Parent-1{
    position: absolute;
    z-index: 10;
    background-color: green;
}

.Parent-2 {
    position: absolute;
    z-index: 5;
    background-color: red;
}

.pepe, .pepin{        
    background-color: blue;
}

.pepin{
    position: fixed;
    z-index: 100;
}

这就是我所拥有的（这就是应该发生的事情）：

这就是我要的：

请记住，我无法更改 HTML 中的元素顺序，也无法删除 Parent 元素中的 z-index