内容 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/

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

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

Content div overlays full width image instead of being pushed down

jquery

html

css

fullscreen