Html 使容器略高于页脚

我有一个容器，其中主要包含固定宽度（因此不是100%）的页面所有内容，底部有一个页脚，即

width:100%

我想让容器的这一部分位于页脚上方，这就是我所带来的：

这样做，正如您所注意到的，由于

z-index

，页脚内容不再是可点击或可选择的。我可以将容器设置为相对位置，例如，但该解决方案的问题是，我无法将页面的全部内容放在

位置：relative

元素中，该元素中的某些弹出窗口或某些功能可能会有意外的行为，因此我认为这不是一个好的做法

---

有解决办法吗？谢谢。

我能想到的一个解决方案是对指针事件使用css规则，只要主元素中没有任何可单击的内容：

main{
指针事件：无；
}

如果主元素中有可单击的元素，则必须扩展规则：

main{
指针事件：无；
}
主要*{
指针事件：全部；
}

示例

main{
位置：相对位置；
背景色：红色；
宽度：400px；
保证金：0自动；
指针事件：无；
}
主要*{
指针事件：全部；
}
页脚{
背景颜色：绿色；
填充顶部：20px；
利润上限：-20px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。

我使用

flex

的强大功能实现了这一点，但我不确定这是否真的是一个更好的解决方案

我使用css

flex direction:column reverse

反转列/元素的顺序，然后使用order将main div再次放在第一个位置

order:1

（默认顺序为0）

.app{
显示器：flex；
弯曲方向：柱反向；
}
主要{
背景色：红色；
宽度：400px；
保证金：0自动；
顺序：1；
}
页脚{
背景颜色：绿色；
填充顶部：20px；
利润上限：-20px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。