CSS:position:relative元素侵占另一个元素的顶部

Question

我正在尝试制作 this Wordpress site响应式，通过添加以下自定义 CSS:

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

但是，当我将浏览器视口(viewport)的宽度移动到 900px 时，#menu(顶部导航菜单)将增加高度以适应 #menu' s LI 元素已经向下和向左浮动，但是 #content-full(图像 slider 的父容器)将爬上 # 的下半部分menu，隐藏被向下和向左推的 LI 元素。

主题包含:

#content-full {
  position: relative;
}

那么为什么#content-full 表现得像position: absolute？

谢谢。

Answer 1

问题不在于内容，而在于标题。 #header 有一个属性 height: 134px。此 header 中的 #menu 已被赋予 position: absolute。由于绝对定位的元素在呈现之前从上下文中取出，父元素(在本例中为 #header)不会像预期的那样增长以适应 #menu 的高度。这就是明确指定高度的原因。内容未表现得绝对定位。标题的上述行为使其看起来像那样。

一个解决方法是提供一种额外的样式来更改 #header 的高度以适应菜单的下一行。

对于 max-width: 959px 就是这样的

#header {
    height: 174px;
}

这将处理第二行菜单项。注意:您用于菜单的背景图像将被破坏。因为它是为单行菜单制作的。我建议用 CSS 渐变和圆 Angular 边框替换背景图片。