html - 具有绝对位置的不同分组中的 z-index 子 div

Question

我有这个问题

这是HTML

 <div class="view">
   <div class=" slice b1"  ">
     <div class="slice b2"  ">
       <div class="slice b3" ">
         <div class="slice b4"  ;">
         </div>
       </div>
     </div>
   </div>
   <div class=" slice f1" >
     <div class="slice f2 " >
       <div class="slice f3 " >
         <div class="slice f4 " >
         </div>
       </div>
     </div>
   </div>
 </div>

如您所见，有 2 个组分层链接 b1 > b2> b3> b4 和 f1 >f2 > f3 > f4

我可以控制 z-index 以便 f1 f2 f3 和 f4 首先在顶部，然后说悬停或事件 b1 和 b4 将覆盖 f1 f2 f3 和 f4(通过旋转和平移和 z-index)

我只关心 z-index 属性，其余的我已经解决了。

我试图解决的问题是纸张折叠模拟，这是完整的代码 http://codebeautify.org/alleditor/a66bcd

Answer 1

简短的回答:没有。

长答案:不是您设置嵌套的方式。

您必须了解，每个元素都根据其来自文档根和层次结构的 n 级别获得自己的堆栈上下文。因此，您的 f 和 b 堆栈是 sibling ，并且共享一个堆栈上下文。 F可以通过z-index的方式覆盖B，但是F1不能通过stacking context的方式覆盖B1。

考虑这个例子:

-F0
--F1
---F2a
---F2b
----F3
-B0
--B1a
---B2
--B1b

堆叠上下文如下:

1. R0 - F0 & B0
2. F1 - F1
3. F2 - F2a 和 F2b
4. F3 - F3
5. B1 - B1a & B1b
6. B2 - B2

除非它们是 sibling ，否则这些堆叠上下文不会相互影响。如果我将 B 堆栈更改为 z-index: 2 并将 F1 堆栈更改为 z-index: 999999999， B 堆栈仍将始终位于 F1 堆栈之上，因为 z-index 高得离谱，这说明 F1 比它的堆栈高 999,999,999 级 sibling (它没有)。因此，所有 B 堆栈将显示在所有 F 堆栈上，因为 B 堆栈现在具有更高的 z- index 在更接近文档根的元素上。

因此，为了获得您想要的行为，您必须结合使用 position: absolute 和 z-index 进行伪堆栈。

请记住，无论如何您都需要某种定位，因为默认的 position: static 不允许通过 z-index 进行堆栈 float .