Question

我有 2 个元素。这两个元素具有相同的 CSS 代码，它们彼此重叠。但是，我想要做的是让最底部的元素 .bar 为 .bar2 提供间距。想象一下 .bar 是底部移动导航栏，.bar2 是设置菜单。两者都有 bottom: 0 CSS，但是，我不希望它们彼此重叠。 .bar 应该有自己的间距，这样 .bar2 才能完全显示。我该怎么做？这是JsFiddle

我知道我可以通过将 bottom 添加到 .bar2 来做到这一点，但我不想移动 .bar2 我希望 .bar 为 {{ 提供不可见的填充1}}

.bar2

.bar2 {
  position: fixed;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 1.3rem 2rem;
  justify-content: space-between;
  border-top: 1px solid lightgray;
  background-color: green;
  z-index: 5;
}

.bar {
  position: fixed;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 1.3rem 2rem;
  justify-content: space-between;
  border-top: 1px solid lightgray;
  background-color: red;
  z-index: 5;
}

Answer 1

希望你一切顺利。

这是一种非常简单的方法，通过将 CSS 属性赋予 .bar2 类，您必须设置如下

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

假设您的 .bar 高度为 50px，那么 .bar2 的底部为 50px。

我希望你能通过我的回答得到你的解决方案。

谢谢...

Answer 2

你想要这样的东西

.bar2 {
    position: fixed;
    bottom: 0px;
    height:40px;
    display: block;
    width: 100%;
    padding: 1.3rem 2rem;
    justify-content: space-between;
    border-top: 1px solid lightgray;
    background-color: green;
    z-index: 5;
}


.bar {
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
    padding: 1.3rem 2rem;
    justify-content: space-between;
    border-top: 1px solid lightgray;
    background-color: red;
    z-index: 5;
}

<div class="bar2">
  <div class="item">
   
  </div>
</div>

<div class="bar">
  <div class="item">
   
  </div>
</div>

在两个固定元素之间添加间距

2 个答案: