当浏览器窗口扩展时，响应滑块图像会被菜单重叠

Question

似乎无法找到为什么当浏览器窗口完全展开时，此全宽滑块中的图像会被其上方的菜单略微重叠。

它在移动设备，平板电脑，它的桌面上看起来很完美。这是一个链接，打开和关闭窗口，你会看到我的意思：

[已删除链接]

谢谢！

Answer 1

啊哈！发现它！

---

好的，当你的窗口足够小以“合格”为移动设备时，你的标题上有一个非常重要的属性：

position: static;

这意味着标题位于文档的流程中。当您更改为桌面大小时，会更改为

position: fixed;

这会将顶部标题从文档流中移出，将其他内容滑动到其位置。

所以，要解决这个问题，你可以这样做：

@media screen and (min-width: 700px) /*<--your min desktop width here*/
{
    body
    {
        margin-top: 40px; /*header height here*/
    }
}

Answer 2

正在做一些侦探工作，发生了两件事，其中一件事，我在标题的前面添加了针对Chrome错误的修复程序：

body:after {
        display: initial;
        position: absolute; 
        top: 0;
        visibility: hidden;
    }

第二，需要用填充来补偿它：

.iosSlider .slider .item img {
    width: 100%;
    height: auto;
    float: left;
    padding-top: 15px;
}

多米诺效应。

Answer 3

在导航div css文件中使用以下代码

  position: relative;
  z-index: 100;