Question

我试图重现this tutorial的响应式菜单。这一切都运行良好，但我试图将菜单固定在页面顶部，用于我的一个项目。不幸的是，隐藏的菜单在修复后，不会在悬停后更改z-index。

#icon_cont  ul{
    background-color: #cccccc;
    margin-top: 75px;
    z-index:-2; /**THIS DOES NOT APPLY**/
    position: absolute;
    top:100%;
    padding: 0;
    right: 0;
}

我尝试过各方面但它根本没有用。

您可以在this example中看到，当容器具有相对位置时，它可以正常工作，但当它处于固定位置时，菜单不会留在其他元素后面。

感谢，任何帮助！

Answer 1

原因是您正在将postion: fixed;应用于该元素。固定位置会推到z-index堆栈的前面。以下是了解堆叠顺序如何工作的基本规则：

堆叠上下文的根元素



具有负z-index值的定位元素（及其子元素）（较高值堆叠在较低值之前;具有相同值的元素根据HTML中的外观堆叠）



非定位元素（按HTML中的外观排序）



z-index值为auto的定位元素（及其子元素）（按HTML中的外观排序）



具有正z-index值的定位元素（及其子元素）（较高值堆叠在较低值之前;具有相同值的元素根据HTML中的外观堆叠）

（取自 Philip Walton 的宝贵帖子，"What No One Told You About Z-Index" ）

将position: fixed;应用于元素时，它位于所有相对位置项的前面。 Z-index值相对于＆＃34;堆栈＆＃34;而非全局。

每个堆叠上下文都有一个HTML元素作为其根元素。在元素上形成新的堆叠上下文时，该堆叠上下文将其所有子元素限制为堆叠顺序中的特定位置。 这意味着如果元素包含在堆叠顺序底部的堆叠上下文中，则无法使其出现在堆叠顺序较高的不同堆叠上下文中的另一个元素前面，即使z指数为10亿！

可以通过以下三种方式之一在元素上形成新的堆叠上下文：


当元素是文档的根元素（<html>元素）
时
当元素的位置值不是static且z-index值不是auto
时
当元素的opacity值小于1
时

（强调我的）

应用媒体查询时，固定菜单不会保留

1 个答案: