无法使z-index正常工作

-1

我无法在侧边栏上获取底部三角形的z-index以正常工作。我需要它在标题框下面，以便我可以看到3D效果..任何想法？无法使z-index正常工作

侧边栏在右侧（与黄色标题）

2013-03-15 Kevin

请参阅：[我的网站上的某些内容不起作用。我可以只是粘贴一个链接？]（http://meta.stackexchange.com/q/125997/）为什么您的文章可能需要改进的原因。 – 2013-03-15 20:37:14

您遇到的问题是，你正试图设置一个比它嵌套在一个较低的元素的z-index的这是不可能的 - 见链接的图形示例： https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context

你需要做的是确保你想要向后移动的元素不是你期望前面的物品的后代。

在您的具体情况下，您可以通过将.heading的样式应用于h2来弥补这一点。

或者，您可能会考虑使用psuedo元素，因此您不必添加额外的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

来源

2013-03-15 20:52:45

这可能会更好，因为对OpherV的回答评价者而不是回答本身。 – Dutts 2013-03-15 21:14:51

我已经编辑了答案，所以它现在是一个自包含的答案，而不是引用OpherV的（我认为这是它的主要问题）。 – 2013-03-15 22:23:47

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

来源

2013-03-15 20:36:03 OpherV

无法使z-index正常工作

回答

相关问题