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属性设置为absolute 这个工作？
4. 响应能力怎么样？如果，我如何处理窗口大小调整 元素的位置是绝对的？

Answer 1

至于标记：

• 将第2层放置在第3层内
• 提供第3层position:relative;
• 提供第2层position:absolute;

这将使第2层的顶部，左侧，右侧，底部属性相对于第3层的边界。

Answer 2

你可以尝试在第2层= z-index：3

中给出css悬停

#layer1 {
z-index: 0;
}
#layer2 {
z-index: 1;
}

/* This CSS will display layer 2 in mouse hover and cover layer 3 */
#layer2:hover {
z-index: 3;
}

#layer3 {
z-index: 2;
}

也许你可以尝试使用javascript / jquery显示/隐藏css