CSS:页脚出现在浏览器大小缩小的主要内容上

Question

我创建了一个前端计算器，并在页面底部添加了一个“启动说明”按钮。单击该按钮时会展开为模式，显示操作计算器的说明。

这是页脚 HTML 的一部分

<div id="instructions">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
      Launch Instructions
    </button>

我修复了页脚靠近屏幕底部的位置，但我不理解它会保留在同一个位置，即使浏览器是按比例缩小，从而导致页脚出现在计算器本身之上。

这是页脚 css -

#instructions {
  position: fixed;
  left: 44%;
  bottom: 0px;
  z-index: 1049;
  font-family: 'Courgette', cursive;
}

#instructions button {

  text-transform: uppercase;
  opacity: 0.6;
}

这是 Codepen 上的完整应用程序.

我不确定如何使页脚和“启动说明”按钮保持在计算器下方，即使屏幕缩小也是如此。也许我需要一个媒体查询来更改 button 的 z-index？

@media screen and (max-height: 300px) {
    #instructions button {
    z-index: -1;
    }

}

非常感谢!

Answer 1

只需执行以下操作:

• 为 #instructions 将 z-index 更改为 1。
• 为 #wrapper 添加 z-index: 2。

CSS

#instructions {
  z-index: 1;
}
#wrapper {
  z-index: 2;
}

预览

CodePen:http://codepen.io/anon/pen/vyGPRR