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

Question

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

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

我的问题是，当我使用Google Developers工具或Android（三星银河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;

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

Answer 2

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

Answer 3

我发现的一个问题是父#home容器本身似乎使您感到悲伤。 这是我最后在开发人员控制台中所做的一些调整。 我在完整的桌面视图上对其进行了测试，并在移动预览中将其缩小了，并且可以正常工作。

CSS：

#home {
   z-index: 1;
}

#myTopnav {
   z-index: 999;
}

此外，请确保为您的元素建立位置值。

那应该为您解决问题！