jquery - 内容 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;   
}

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

您可以在 fiddle 中看到它的实际效果。

Answer 1

我想我自己找到了解决方案。

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

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

现在看起来它的行为符合预期 - 当菜单打开时，它会将所有内容向下推送。

参见 fiddle :https://jsfiddle.net/5bfvq5Lp/2/

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