Question

我无法在侧边栏上获得底部三角形的z-index以正常工作。我需要它在标题框下方，这样我才能看到3D效果......任何想法？

侧边栏位于右侧（带黄色标题）

Answer 1

您遇到的问题是您尝试将元素的z-index设置为低于嵌套元素的z-index。这是不可能的 - 请参阅图形示例的链接： https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context

您需要做的是确保您想要向后移动的元素不是您希望前面的项目的子孙后代。

在您的特定情况下，您可以通过将.heading样式应用于h2来解决此问题。

或者，您可以考虑为此使用伪元素，这样您就不必添加额外的div。你的html就是：

<div class="heading">Title goes here</div>

然后你会用这个规则添加你当前的.heading样式（确保保持相对：定位你的.heading但从中移除任何z-index）：

.heading:before{
content:" "; display:block; position:absolute;
border-color: transparent #dfb704 transparent transparent; border-style: solid; border-width: 15px;
height: 0px; width: 0px; 
left: -15px; bottom: -15px;
z-index: -1;
}

这会将您的三角形直接设置在z-index堆栈中的标题下方。这是一个简单的例子： http://codepen.io/chrisboon27/pen/Fprxk

Answer 2

frame是heading的后代，因此frame的z-index属性会影响它。如果您希望为它们提供不同的z深度，则需要将它们放在DOM树的不同分支上。例如：两者都可以是block的子元素。

无法使z-index正常工作

2 个答案: