Question

我有一个我正在建设的网站，我正在使用Skeleton CSS，一切都响应迅速，工作正常。

我在正确的位置有一个菜单栏（列表），但是当我调整大小时，它似乎与我的标题图像重叠，是否有人知道如何阻止它？

此处示例：http://www.cosworth-europe.co.uk/test/indextest.html

请调低浏览器的大小。

HTML：

HTTP 200 OK
Content-Type: image/png
Cache-Control: no-cache, max-age=0

CSS：

application/models

Answer 1

这是因为你的导航绝对定位。根据您想要发生的事情，我可能会将一些媒体查询添加到正确的位置。

我可能会将标题图像向左移动一点并向右轻推导航 - 这只会工作到一定大小，然后你需要一个不同的导航栏布局。

Answer 2

您应该使用媒体查询来处理元素的位置，具体取决于不同的大小。无论屏幕大小如何，您正在使用＃main-nav的position：absolute来固定导航栏。

示例：

CSS：

#main-nav {
    position: absolute;
    right: 120px; /* Default */
}

@media only screen and (max-width: 700px) {
    body {  
        #main-nav {
            position: absolute;
            right: 50px; /* Will apply when the screens width is smaller than 700px */
        }
    }
}

如何阻止我的列表重叠我的标题图像？

2 个答案: