html - 在移动设备上浏览我的页面时出现 Z-index 问题

Question

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

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

我的问题是，当我使用 Google Developers 工具或我的 android(三星 galaxy s4)设备检查页面时，导航栏的元素总是落后于#home 的内容。

我尝试调整导航栏元素相对于主页内容的 z 索引，但无济于事。在开发人员工具中检查元素时，我看到导航栏元素和 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

你必须给 z-index 一个位置才能工作。所以如果你添加 position:relative; z-index:10; 添加到您的 header ，它应该可以正常工作。