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

我创建了一个前端计算器，并在页面底部添加了“启动说明”按钮。该按钮在点击时展开为模式，显示操作计算器的指示。CSS：页脚出现在浏览器尺寸缩小的主要内容上

这里的页脚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完整的应用程序。

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

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

}

非常感谢！

来源

2016-11-14 Manish Giri

可能duplicat e [CSS粘滞页脚边距]（http://stackoverflow.com/questions/11868249/css-sticky-footer-margin） –

只需做到以下几点：

变化z-index到1为#instructions。
Add z-index: 2 for #wrapper。

CSS

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

预览

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

来源

2016-11-14 04:34:43

但是，将按钮放在计算器应用程序下。现在，如果您缩小浏览器范围，则无法单击按钮并获得说明对话。我正在寻找一种方法来确保按钮总是在计算器应用程序后面出现，并且始终可以点击。 –

@Manish啊...现在我明白了。好的，我会检查并通知你。 –

@Manish检查一下：[** Sticky Footer **]（https://css-tricks.com/couple-takes-sticky-footer/）是你需要的。 –

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

回答

相关问题