0

我无法让侧边栏上的底部三角形的 z-index 正常工作。我需要它位于标题框下方，这样我才能看到 3D 效果.. 有什么想法吗？

该网站是 - http://www.dunkleysdairy.com

侧边栏在右侧（带有黄色标题）

4

2 回答 2

1

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

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

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

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

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

然后，您将使用此规则添加到您当前的 .heading 样式（确保在您的 .heading 上保持 relative:positioning 但从中删除任何 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

于 2013-03-15T20:52:45.420 回答
0

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

于 2013-03-15T20:36:03.250 回答