無法使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正常工作

回答

相關問題