Z索引不适用于绝对位置的子div

Question

我正在尝试创建一个功能区，将三角形div放置在其购物车父div下方

<div class="rectangle">
  <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0">
    <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#">Sign in </a>
    </li>
    <li role="presentation">
       <a rolw="menuitem" tabindex="-1" href="#">View Cart</a>
    </li>
  </ul>
  <!-- Ribbon side-fold (left and right) -->
  <div class="triangle-l triangle-left-pos"></div>
  <div class="triangle-r triangle-right-pos"></div>
</div>

和JS Fiddle在这里， 所以我的问题是，子div不会放在父div之下，在小提琴中，div放在上面，尽管我给定的z-index小于父div。

编辑：-添加图像，应在子div位置放置

Answer 1

在父堆栈上下文中，堆栈上下文在原子上被视为一个单元。

父元素.rectangle创建了一个堆栈上下文，因此子元素在z-index中解析.rectangle，因此不能将其放置在父元素下。

如果移动element 的z-index属性.rectangle，并将负值应用于z-index子项，则可以根据需要放置它们。因为在这种情况下，parent元素和children元素都属于同一堆叠上下文（在演示中为#root），并且负z-index序使子元素在Z轴上保持低于parent的状态。

但是请记住，如果您应用CSS3转换，或对父元素进行不透明转换，则会创建一个新的堆栈上下文，并且该上下文将与您在演示中所获得的一样。

参考：堆栈上下文