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 here 所以我的问题是，子div没有被放置在父div之下，在小提琴中，div被放在上面，虽然我已经给出了z-index小于父div。

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

ribbon image

Answer 1

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

父元素.rectangle已创建堆叠上下文，因此子元素＆＃39; z-index已在.rectangle内解决，因此无法将其置于其父级之下。

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

但请记住，如果您应用CSS3变换，或者对父元素进行不透明度转换，则会创建一个新的堆叠上下文，它将与您在演示中获得的内容相同。

参考：The stacking context

Answer 2

这是您要找的Demo吗？

然后摆脱top和.triangle-left-pos and的{{1}}值。

Answer 3

除非您不更改HTML标记，否则您目前所做的事情是不可能的。

请参阅CSS Position的文档 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

但是你想要达到的结果并非不可能，请查看小提琴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不能处理绝对位置的子div

3 个答案: