CSS：在浏览器尺寸缩小时，页脚出现在主要内容之上

Question

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

这是页脚的一部分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 上的完整应用。

我不确定如何使页脚和 "launch instructions" 按钮保持在计算器下方，即使在屏幕缩小时也是如此。也许我需要一个媒体查询来更改 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;
}

预览

代码笔：http://codepen.io/anon/pen/vyGPRR

CSS：在浏览器尺寸缩小时，页脚出现在主要内容之上

CSS: Footer appears over main content on browser size shrink

css

position

z-index

footer

sticky-footer