一个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超过两个人，但只有其中的一个操作

回答

相关问题