javascript - 当浏览器窗口展开时，响应 slider 图像被菜单重叠

Question

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

它在移动设备、平板电脑上看起来很完美，但问题出在桌面设备上。这是一个链接，打开和关闭窗口，您就会明白我的意思:

[链接删除]

谢谢!

Answer 1

啊哈!找到了!

---

好的，所以当您的窗口小到足以“符合”移动设备的标准时，您就在标题上设置了一个非常重要的属性:

position: static;

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

position: fixed;

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

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

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