在另一個元素的子元素下面繪製元素

Question

我試圖在Google Map上創建一個摺痕疊加層，以使地圖看起來像是一張桌子上的真實地圖。摺痕是位於地圖上方的2條像素線。這看起來不錯，不會破壞與地圖的交互作用，500條垂直線條中只有6條不能點擊並使用一個名爲ext-forward的JavaScript庫，在更好的瀏覽器上點擊被轉發，這是問題的教訓。

問題在於放置在地圖上的標記繪製在摺痕下方，但仍然有3d樣式陰影。

標記是地圖div的子元素，摺痕與地圖div相同。 IE的摺痕和地圖是兄弟姐妹。這張地圖是z-index 0，標記是z-index < 100.無論我給摺痕什麼z-index，它們都會在地圖div或以下繪製，絕不會介於兩者之間。有什麼方法可以改變它嗎？

Answer 1

看起來你將不得不添加摺痕作爲地圖div的孩子，z-index小於標記但大於地圖本身。必要時使用JavaScript或jQuery將摺痕對象附加到地圖對象（我假定地圖對象內容在某些點刷新）。

Answer 2

這裏的the spec應該如何繪製。我認爲規則9涵蓋了兩個絕對定位的項目，它們具有一個正的，非零的z-索引，但老實說，我不太清楚你的情況中所有對象如何定位以及它們在樹中的位置準確地知道應該應用哪些規則。一些示例HTML可能會幫助人們解釋您的特定情況的規則。

最簡單的解決方案是將摺痕放置在與標記相同的父級，並確保它們都是位置：絕對位置，以便通過z-index精確控制z級。如果它們不是位置：絕對的，那麼它可能是控制事物的子命令。