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>

我fixed靠近屏幕底部的页脚的position，但是我不理解即使浏览器按比例缩小它也会保持在同一个地方，从而导致页脚出现在计算器本身上方。

这是页脚css -

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

#instructions button {

  text-transform: uppercase;
  opacity: 0.6;
}

这是Codepen上的完整应用。

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

button

非常感谢！

Answer 1

请执行以下操作：

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

<强> CSS

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

预览

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