javascript - CSS 动画和 Z-index

Question

我将调用我的 div 元素层，以使堆栈顺序清晰。我有三层，比方说，z-index 为

第 1 层，z-index: 0;
第 2 层，z-index: 1;
第 3 层，z-index: 2;

• 第 1 层是用作主页的 div，作为 body 元素的第一个子元素。
• 第 2 层是我想要制作动画的菜单，它需要在悬停时播种/隐藏。
• 第 3 层是内页，第 1 层的子层，第 2 层最初隐藏在下面(就堆栈而言)

这是元素的模型:

我想从右到左为第 2 层制作动画，直到虚线(元素的末端从右边开始)与第 3 层的左侧相交。一旦第 2 层完全显示，我希望它动画回到原始位置但 z-index 高于第 3 层，允许重叠。当悬停结束时，第 2 层应该以相同的方式进行动画处理，但具有“反转”效果。

我对 CSS 及其工作原理还很陌生。我完全知道 jquery 将发挥作用，因为事件将被触发。

我的问题

1. 但我不太清楚的是，需要如何设置标记？
2. 第 2 层是否需要在第 1 层和第 3 层之外？(即不是 1,3 的子层)。
3. 是否需要将 position 属性设置为绝对这个有用吗？
4. 响应能力如何？如果元素用绝对定位？

Answer 1

至于标记:

• 将第 2 层放在第 3 层内
• 给layer 3 position:relative;
• 给layer 2 position:absolute;

这将使第 2 层的上、左、右、下属性相对于第 3 层的边界。