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＆gt; B2＆GT; B3＆GT; B4 并且f1＆gt; f2＆gt; f3＆gt; f4

我可以控制z指数，使f1 f2 f3和f4首先位于顶部，然后让我们说悬停或激活b1和b4将覆盖f1 f2 f3和f4（通过旋转和平移和z指数）< / p>

我只关心其他人已经解决的z-index属性。

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

Answer 1

答案简短：不。

答案很长：不是你设置嵌套的方式。

您必须了解每个元素都会根据文档根目录和层次结构中的 n 级别获得自己的堆叠上下文。因此，您的f和b堆栈是兄弟姐妹并共享堆叠上下文。 F可以通过z-index重叠B，但F1不能通过堆叠上下文重叠B1。

考虑这个例子：

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

堆叠上下文如下：

R0 - F0＆amp; B0
F1 - F1
F2 - F2a＆amp; F2B
F3 - F3
B1 - B1a＆amp; B1B
B2 - B2

这些堆叠上下文不会互相交互，除非它们是兄弟姐妹。如果我将 B 堆栈更改为z-index: 2并将 F1 堆栈更改为z-index: 999999999，则 B 堆栈仍将始终结束 F1 堆栈，因为所有那些高得离谱的z-index所说的是 F1 比其兄弟姐妹高出999,999,999（没有它）。因此，所有 B 堆栈将显示在所有 F 堆栈上，因为 B 堆栈现在具有更高的z-index在靠近文档根目录的元素上。

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

请注意，无论如何都需要某种定位，因为默认position: static不允许通过z-index浮动堆栈。

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

1 个答案: