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>

我fixedposition是靠近屏幕底部的页脚，但我没想到即使浏览器缩小它也会留在原处，从而导致页脚出现过度计算器本身。

这是页脚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

只需执行以下操作：

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

CSS

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

预览

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