一個DIV超過兩個人，但只有其中的一個操作

上的div https://drive.google.com/file/d/0B7_Dgiq7dtZEdXpZdlpMaTY2cFU/view?usp=sharing

格設置都只是爲了更好地瞭解哪些是前景其中：

div1 - z-index: 1; background: red; 
    div2 - z-index: 2; background-image: url('triangle.png'); 
    div3 - z-index: 3; background: rgba(255,255,255,0.65);

div3只在操作/覆蓋div2。

任何想法如何做到這一點？

來源

2015-03-31 luke9999

使用相對或絕對定位，這應該是可行的。除非你的意思是你想要div3覆蓋div2但不是div1 ... – Terry 2015-03-31 18:01:29

是的，我確實想要Div3覆蓋Div2，但不是Div1 – luke9999 2015-03-31 18:03:02

這很不幸是不可能的 - 你不能使z-index上的元素的一部分高於另一個元素（在堆棧之上），並將另一部分放在較低的地方（在堆棧之下）。將z-index想象成水平佈置的紙張層。你想在這裏做什麼？如果您可以描述您的場景和預期的功能/用途，則可能有其他方法，如剪輯路徑。 – Terry 2015-03-31 18:05:43

你可以像你張貼的圖片一樣排列。 DIVs由z-index堆疊而成，它完全位於具有較低z-index（一個div覆蓋將隱藏其下的所有元素的區域）的圖層之上。因此，如果元素具有z-index = 3，則它將完全位於具有較低z-索引的元素之上。

div{ 
 
    position: absolute; 
 
} 
 
div.base{ 
 
    z-index: 1; 
 
    background: red; 
 
    width: 300px; 
 
    height: 300px; 
 
    top: 10px; 
 
    left: 10px; 
 
} 
 
div.triangle{ 
 
    z-index: 2; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 0 100px 200px; 
 
    border-color: transparent transparent grey transparent; 
 
    top: 100px; 
 
    left: 50px; 
 
} 
 
div.top{ 
 
    z-index: 3; 
 
top: 100px; 
 
left: 150px;  
 
opacity: 0.4; 
 
border: solid 1px black; 
 
width: 100px; 
 
height: 100px; 
 
background: white; 
 
-webkit-clip-path: polygon(0px 50px, 0px 100px, 100px 100px, 100px 0px); 
 
}

<div class="base"></div> 
 
<div class="triangle"></div> 
 
<div class="top"></div>

來源

2015-03-31 19:28:03 Zivko

非常感謝你的回覆。如果div3覆蓋div1和div2的顏色並不重要，那麼您的解決方案就可以工作。我的意圖是，div 3將只覆蓋div2無視div 1 – luke9999 2015-03-31 21:46:30

我編輯了上面的代碼並將剪輯添加到頂層（用於chrome）。使用剪輯可以將元素剪切成自定義形狀，但需要一些數學來計算多邊形點的位置。如果你需要移動層次，你會有很多計算：o） – Zivko 2015-04-01 08:02:11

一個DIV超過兩個人，但只有其中的一個操作

回答

相關問題