浏览器窗口展开时，响应式滑块图像与菜单重叠答案

【问题标题】：Responsive Slider image gets overlapped by menu when browser window expands浏览器窗口展开时，响应式滑块图像与菜单重叠
【发布时间】：2015-04-10 18:37:48
【问题描述】：

似乎无法解释为什么这个全角滑块中的图像在浏览器窗口完全展开时会被其上方的菜单略微重叠。

它在移动设备、平板电脑和台式机上看起来很完美，这是问题所在。这是一个链接，打开和关闭窗口，你就会明白我的意思了：

[链接已删除]

谢谢！

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

啊哈！找到了！

好的，当您的窗口小到足以“符合”作为移动设备的条件时，您的标题上设置了一个非常重要的属性：

position: static;

这意味着标题在文档流中。当您更改为桌面大小时，它会更改为

position: fixed;

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

因此，要解决此问题，您可以执行以下操作：

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

【讨论】：

谢谢大卫，我在萤火虫中添加到我的孩子主题的 css 中，它似乎已经修复了它，但是现在菜单上方有一个额外的白条，这很奇怪？！我应该补充一下，它的宽度约为 1155 像素。

【解决方案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;
}

多米诺骨牌效应。

【讨论】：

【解决方案3】：

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

  position: relative;
  z-index: 100;

【讨论】：