Html 在两个固定图元之间添加间距

我有两个要素。这两个元素都有相同的CSS代码，它们位于彼此的顶部。但是，我想做的是让最下面的元素

.bar

为

.bar2

提供间距。想象一下，

.bar

是底部移动导航栏，

.bar2

是设置菜单。两者都有

bottom:0

CSS，但是，我不希望它们坐在彼此的上面

.bar

应该有自己的间距，以便可以完全显示

.bar2

。我该怎么做？这里有一个

我知道只需将

底部

添加到

.bar2

即可，但我不想移动

.bar2

我希望

.bar

为

.bar2

提供不可见的填充

.bar2{
位置：固定；
底部：0；
显示：块；
宽度：100%；
填充：1.3rem 2rem；
证明内容：之间的空间；
边框顶部：1px纯色浅灰色；
背景颜色：绿色；
z指数：5；
}
.酒吧{
位置：固定；
底部：0；
显示：块；
宽度：100%；
填充：1.3rem 2rem；
证明内容：之间的空间；
边框顶部：1px纯色浅灰色；
背景色：红色；
z指数：5；
}

---

我希望你做得很好

这是一种非常简单的方法，通过将CSS属性赋予

.bar2

类，您必须设置如下

.bar2 {
  bottom: /*.bar height in pixel*/
}

假设您的

.bar

高度为

50px

，则

.bar2

的底部为

50px

我希望你能从我的回答中得到解决方案

---

谢谢你…

你想要这样的东西吗

.bar2{
位置：固定；
底部：0px；
高度：40px；
显示：块；
宽度：100%；
填充：1.3rem 2rem；
证明内容：之间的空间；
边框顶部：1px纯色浅灰色；
背景颜色：绿色；
z指数：5；
}
.酒吧{
位置：固定；
底部：0；
显示：块；
宽度：100%；
填充：1.3rem 2rem；
证明内容：之间的空间；
边框顶部：1px纯色浅灰色；
背景色：红色；
z指数：5；
}

我不想移动bar2，尽管现在我已经增加了高度，但没有移动它。我不想用.bar2改变任何东西，我只想用.bar来提供所需的间距。bar2需要我知道我可以用bar2来做，但我想用

.bar

来提供某种无形的填充，这样它就可以向上推

。bar2