Question

我有一个全宽图像：

.image {
    background-image: url(http://cdn1.tnwcdn.com/wp-content/blogs.dir/1/files/2014/06/wallpaper_51.jpg);
    background-position: center center;
    background-repeat:  !important; 
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-color: #2b6c72;
}

在上面我有一个隐藏的菜单，由一个按钮（右上角）触发。当菜单打开时，它会按下全宽图像。

在全宽图像下方，我有一个绿色内容区域。隐藏菜单打开时，内容区域覆盖全宽图像而不是向下推。

#content-wrapper {
    top: 100%;
    position: absolute;
    width: 100%;
    max-width: 1280px;
    height: 400px;
    background: #3C9;
    margin: 0px auto;
    left: 0;
    right: 0;   
}

问题 - 当菜单打开时，如何将内容区域按下而不是覆盖图像？

您可以在fiddle

中看到它的实际效果

Answer 1

我认为我找到了一个解决方案。

我将.image和#content-wrapper包裹在一个绝对定位的新div中，并将其设置为宽度和高度的100％。

#wrapper {
    position:absolute;
    width: 100%;
    height: 100%;
}

现在看起来它按预期运行 - 当菜单打开时，它会向下推送所有内容。

请参阅小提琴：https://jsfiddle.net/5bfvq5Lp/2/

如果您遇到其他事情，请告诉我。

内容div覆盖全宽图像而不是向下推

1 个答案: