Question

我正在尝试通过添加以下自定义CSS来使this Wordpress site响应：

@media (max-width:959px) {
    .container, #menu, #featured, .slide .overlay, .slide .overlay2 {
        width: 100%;
    }
    img {
        max-width: 100% !important;
        height: auto;
    }
    #menu {
        height: auto;
    }
}

但是，当我将浏览器视图端口的宽度移动到900px时，#menu（顶部导航菜单）的高度会增加，以容纳#menu的{{1}}元素向下漂浮并向左移动，但是LI（图像滑块的父容器）将向上爬过#content-full的下半部分，隐藏已被推下并离开的#menu个元素

主题包含：

LI

那么＃content-full的行为是#content-full { position: relative; }？

感谢。

Answer 1

问题不在于内容，而在于标题。 #header有一个属性height: 134px。此标头中的#menu已获得position: absolute。由于绝对定位的元素在渲染之前被取消上下文，因此父级（在这种情况下为#header）不会增长以适应#menu的高度。这就是明确指定高度的原因。内容的行为不是绝对定位的。标题的上述行为使它看起来像那样。

这可能是一种解决方法，即提供一个更改#header高度的附加样式，以适应菜单的下一行。

max-width: 959px

这样的内容

#header {
    height: 174px;
}

这将处理第二行菜单项。注意：您用于菜单的背景图像将会中断。因为它是为单行菜单而制作的。我建议用CSS渐变和圆形边框替换背景图像。

CSS：position：相对元素侵占另一个元素的顶部

1 个答案: