z-index 无法使用绝对位置 child div

Question

我正在尝试创建一个色带，其中三角形 div 应该放在其下方大车 parentdiv

<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 here 所以我的问题是 child div 没有被放置在 parent div 之下，在 fiddle 中，div 被放置在上面, 虽然我给的 z-index 小于 parent div.

编辑：- 添加图像，其中 child div 应该放置

Answer 1

这是您要查找的内容吗Demo？

然后删除 .triangle-left-pos and 和 triangle-left-pos 中的 top 值。

Answer 2

Stacking contexts are treated atomically as a single unit in the parent stacking context.

父元素 .rectangle 已经创建了一个堆叠上下文，因此子元素 z-index 在 .rectangle 内被解析，因此它们不能被放置在它们的父元素之下。

如果您移动 .rectangle 元素的 z-index 属性，并对子元素应用负 z-index 值，则它们可以按照您的意愿放置。因为在这种情况下，父元素和子元素都属于同一个堆叠上下文（在您的演示中为#root），并且负 z-index 顺序让子元素在 Z 轴上保持低于父元素。

但请记住，如果您应用 CSS3 转换，或对父元素进行不透明度转换，将创建一个新的堆叠上下文，并且将呈现与您在演示中获得的相同的效果。

参考：The stacking context

Answer 3

除非您不更改 HTML 标记，否则您现在所做的是不可能的。

Please see the documentation for CSS Position https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

但是您想要达到的结果并非不可能，请检查 fiddle https://jsfiddle.net/nileshmahaja/7coznt7o/

HTML

<div class="rectangle-wrap">
<div class="rectangle">
                            <h2 class="dropdown-toggle" data-toggle="dropdown">
                                Cart <i class="icon-shopping-cart"></i> <b class="caret"></b>
                            </h2>
                            <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></div>

css

.rectangle-wrap{
    position:relative;
    width:200px;
    height:32px;
}
.rectangle {
    background: none repeat scroll 0 0 #de8a03;
    float: left;
    width:200px;
    height: 32px;
    position: relative;
    top: 0;
    z-index: 2;
}


.rectangle  h2 {
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    text-align: center;
}

.rectangle-wrap:before {
    border-color: transparent #332619 transparent transparent;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    content:'';
    position:absolute;
    left:-10px;
    bottom:-10px;
}


.rectangle-wrap:after {
    border-color: transparent transparent transparent #332619;
    border-style: solid;
    border-width: 10px 10px 10px 10px;
    content:'';
    position:absolute;
    right:-10px;
    top:-10px;
    z-index:0
}

z-index 无法使用绝对位置 child div

z-index not working on child div with position absolute

html

css

jquery

twitter-bootstrap-3

css-shapes