Добавить интервал между двумя фиксированными элементами

#html #css

#HTML #css

Вопрос:

У меня есть 2 элемента. Оба элемента имеют одинаковый код CSS, где они находятся друг над другом. Однако то, что я хотел бы сделать, это указать интервал для самого нижнего элемента .bar .bar2 . Представьте .bar , что вы являетесь нижней панелью мобильной навигации и .bar2 меню настроек. Однако у обоих есть bottom: 0 CSS, я не хочу, чтобы они располагались друг на друге. .bar должен иметь свой собственный интервал, чтобы .bar2 его можно было полностью отобразить. Как бы я это сделал? Вот JsFiddle

Я знаю, что могу сделать это, просто добавив bottom .bar2 , но я не хочу двигаться .bar2 , я хочу .bar дать невидимое заполнение для .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;
}

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

  </div>
</div>

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

  </div>
</div>

Развернуть фрагмент

Ответ №1:

Это очень простой способ, предоставляя .bar2 классу свойство CSS, которое вы должны установить следующим образом

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

Предположим, что ваша .bar высота равна 50px нижней части .bar2 is 50px .

Ответ №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>

Развернуть фрагмент

1. Я не хочу перемещать bar2, хотя

2. Проверьте, теперь я увеличил высоту, не перемещая ее

3. Я не хочу ничего менять с помощью .bar2, я просто хочу, чтобы .bar указывал интервал, необходимый .bar2

Ответ №3:

добавьте высоту к обоим вашим компонентам bar1 и bar2 или к любой высоте одного компонента в порядке, а затем укажите маржу, как вы хотите, для этих компонентов