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

Question

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

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

我的问题是，当我使用 Google 开发人员工具或我的 android (samsung 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

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

position: relative;

或

position: fixed;

"z-index only effects elements that have a position value other than static (the default)." - https://css-tricks.com/almanac/properties/z/z-index/

Answer 2

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

Answer 3

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

CSS:

#home {
   z-index: 1;
}

#myTopnav {
   z-index: 999;
}

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

这应该对你有用！

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

Problems with Z-index while browsing my page in mobile

html

css

z-index