CODEWITHSUNDEEP
htmlcss
user2896120
user2896120

Reputation: 3282

Add spacing between two fixed elements

I have 2 elements. Both elements have the same CSS code where they are on top of each other. However, what I'd like to do is for the bottom most element .bar to give spacing to .bar2. Imagine .bar being a bottom mobile navigation bar and .bar2 being a settings menu. Both have bottom: 0 CSS, however, I don't want them to sit on top of each other. .bar should have its own spacing so .bar2 can be fully shown. How would I do that? Here's a JsFiddle

I know I can do this by just adding bottom to .bar2 but I don't want to move .bar2 I want .bar to give invisible padding for .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>

Upvotes: 0

Views: 782

Answers (2)

Prashant Chouhan
Prashant Chouhan

Reputation: 51

add height to your both components bar1 and bar2 or any one components height is ok and then give margin as you want give that components

Upvotes: 0

KuldipKoradia
KuldipKoradia

Reputation: 3031

This is a very simple way by giving CSS property to the .bar2 class, you have to set as following

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

Suppose your .bar height is 50px then bottom of .bar2 is 50px.

Upvotes: 1

Related Questions