jquery - 视口(viewport)底部的菜单然后粘在顶部

Question

我正在努力实现 something like this (100% 高度背景图片，底部有菜单)但不知道如何到达那里。

我的问题是，无论我在哪里包含 <div class="main-menu">在 HTML 代码中，它变得不可见或没有放置在应有的位置...参见 my jsfiddle here .

或者另一个更好的选择可能是让背景图片占据视口(viewport)高度的 100% 减去 50px(菜单的高度)？

谢谢你的帮助

CSS

html,body{height: 100%} 

body {
  background-color: #ffffff;
  font: 300 1em/1.38 'Open Sans';
  color: rgb(128, 128, 128);
}

header {
  position: relative;
  float: left;
  z-index: 12;
  width: 100%;
  height: 90%;
}

.element {
  float: left;
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-attachment: fixed;
}

.element-1 {
  position: relative;
  z-index: 8;
  border-top: 10px solid rgb(0, 0, 0);
  background-image: url('http://placekitten.com/800/800?image=1');
  background-position: center center;
  background-color: rgb(222, 222, 222);
}
.main-menu {
    width: 100%;
    height: 50px;
    background: #358acb;
    position: absolute;
    color: #000;
}

HTML

 <header>
    <div class="element element-1"></div>

  </header>  
  <p class="logo">LOGO</p>
  <article>  <div class="main-menu">This will be the menu</div>

Answer 1

底部:0px； 左:0； z-index:20; 如果我理解正确，这应该可以解决您的问题，当然还需要一些样式。

.main-menu {
   width: 100%;
   height: 50px;
   background: #358acb;
   position: absolute;
   color: #000;
   bottom:0px;
   left: 0;
   z-index:20;
 }

参见 DEMO