Question

我为自己创建了一个投资组合页面。

https://alonoparag.github.io/index.html#home

我的问题是，当我使用Google Developers工具或我的android（samsung galaxy s4）设备检查页面时，导航栏的项目总是落后于#home的内容。

我尝试调整导航栏项目与家庭内容的z索引，但没有用。在检查开发人员工具中的元素时，我看到navbar元素和div z-index都发生了变化，但它并没有影响元素的堆叠方式。

我很感激你的帮助。

干杯

这是我的代码

.topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
   z-index: 10000;
}

div.content {
   align-content: center;
   width: 85%;
   margin: auto;
   padding: 16px;
   z-index: 1;
}

Answer 1

您必须指定（静态）位置，例如。

position: relative;

或

position: fixed;

＆＃34; z-index仅影响位置值不是静态的元素（默认值）。＆＃34; - https://css-tricks.com/almanac/properties/z/z-index/

Answer 2

您必须为z-index提供一个工作位置。因此，如果您在标头中添加position:relative; z-index:10;，它应该可以正常工作。

Answer 3

我发现的一个问题是父#home容器本身似乎是让你感到悲伤的容器。以下是我在开发人员控制台中进行的一些调整。我在一个完整的桌面视图上测试它，并在移动预览中缩小它并且它正常工作。

<强> CSS：

#home {
   z-index: 1;
}

#myTopnav {
   z-index: 999;
}

此外，请务必为元素确定位置值。

那应该为你做的伎俩！

在移动设备中浏览页面时Z-index存在问题

3 个答案: