Html 项目始终位于底部，不与其他内容重叠

我想要两件事：

我想要一个总是在屏幕底部的按钮。不管有多少内容

按钮应位于内容之后，不得重叠

对于1），以下是有意义的：

button: {
            position: "fixed",
            bottom: 0
        }

但我不知道如何使用此设置实现2，任何边距/填充都将被忽略。 下面的图片展示了我的意思：

按钮，即使内容少于全屏：

2）不想要的行为：按钮浮动在其他内容上，而不是放在它下面

我只是缩小了这里的浏览器窗口，如果我在全屏上有更多的“卡片”，同样的结果也会发生。我很确定这不是一个响应性问题，因为我在引擎盖下使用的是具有完全响应性的材质UI

---

您可以像这样使用z索引

button: {
  position: fixed;
  bottom: 0;
  z-index: 10;

像这样的

在

车身上添加
最小高度：100vh

在按钮上添加
position:sticky
，从
底部开始：0px

在包含这两个元素的元素上添加一个
display:flex
（在下面的示例中，它位于body上）

添加
flex:1 1 auto
以使主内容容器扩展到适合最小高度：100vh


let-boxDivs=document.querySelectorAll（'.box'）；
功能切换框大小（事件）{
用于（BoxDiv的出租箱）{
box.classList.toggle（“大”）；
}
}
正文{
最小高度：100vh；
填充：0px；
边际：0px；
显示器：flex；
弯曲方向：立柱；
}
主要{
填充：1rem；
flex:1自动；
}
.盒子{
宽度：20px；
高度：20px；
背景颜色：蓝色；
}
.大箱子{
宽度：200px；
高度：200px；
}
.盒子.粉红色{
背景颜色：粉红色；
}
钮扣{
保证金：0.5雷姆；
}
页脚{
位置：粘性；
底部：0px；
背景颜色：黄色；
}

切换框大小
按钮
寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的格式。请参见
position:fixed
始终相对于视口是固定的，而不是其他任何内容。您好，欢迎使用SO！虽然这段代码可以回答这个问题，但提供关于它如何和/或为什么解决问题的附加上下文将提高答案的长期价值。请阅读，然后