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

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;   
}

问题--当我的菜单打开时，我怎样才能让内容区域向下而不是覆盖图像呢？

您可以在小提琴中看到它的作用。

Answer 1

我想我自己找到了解决办法。

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

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

现在，它似乎是按照预期的-当菜单打开时，它将所有的内容向下推送。

见小提琴：https://jsfiddle.net/5bfvq5Lp/2/

如果你经历过其他事情，请告诉我。