How to overlap the menu with text when popping up without js?

Question

I need a animated menu without js. I create it using "transform" tag.

But Problem is : Footer menu not hidden by label after opened. Searches not given any results. Footer also has gradient color otherwise I'd hide it with a color block

I try play with z-index but no results

Must be

At the moment, the menu appears at the top of the label, but should be at the bottom. How do I make the menu appear at the bottom or overlap with the label?

@media (max-width:992px) {
  footer {
    line-height: 2.2
  }
  .taber {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 5px;
    position: relative
  }
  .taber:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    top: 12px;
    right: 5px;
    float: right;
    transition: transform .5s
  }
  .taber {
    cursor: pointer
  }
  footer :checked+div .mblock {
    position: initial;
    visibility: visible;
    z-index: 1;
    transform: none;
    transition: transform .5s
  }
  footer .mblock {
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
    transform: translateY(-80px)
  }
   :checked+div .taber:after {
    transform: rotateZ(135deg)
  }
}

.top {
  overflow: hidden;
  z-index: 2;
  position: relative
}

.bg-gradient-inv {
  background: linear-gradient(180deg,  blue,#003);
}

footer {
  background: #003;
  color: white
}

.tr {
  color: white
}

.hide {
  display: none
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

Click to footer to view the problem
<br> more text body
<footer class="pt-4 px-4 pb-5 pt-5 bg-gradient-inv">
  <div class=container>
    <div class=row>
      <div class="col-12 col-lg-2 top">
        <input class="hide" type="checkbox" id="f1">
        <div>
          <div class="col-12 top"><label class="small nw tr taber pt-2 d-block" for=f1>Footer</label></div>
          <div class=mblock>
            <div class="col-12"><a class="small nw tr d-block" href=/>1</a>
            </div>
            <div class="col-12"><a class="small nw tr d-block" href=/>2</a>
            </div>
            <div class="col-12"><a class="small nw tr d-block" href=/>3</a>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
  </div>

Answer 1

This is very unclear but from what i've understand you should have a div wrapping mblock. This div would have the size of mblock and overflow hidden. This div would not move, but mblock would move inside it. So when mblock is outside of it, it would not appear.

@media (max-width:992px) {
  footer {
    line-height: 2.2
  }
  .taber {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 5px;
    position: relative
  }
  .taber:after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
    top: 12px;
    right: 5px;
    float: right;
    transition: transform .5s
  }
  .taber {
    cursor: pointer
  }
  footer :checked+div .mblock {
    position: initial;
    visibility: visible;
    z-index: 1;
    transform: none;
    transition: transform .5s
  }
  footer .mblock {
    position: absolute;
    overflow: hidden;
    visibility: hidden;
    z-index: -1;
    transform: translateY(-80px)
  }
   :checked+div .taber:after {
    transform: rotateZ(135deg)
  }
}

.top {
  overflow: hidden;
  z-index: 2;
  position: relative
}

.bg-gradient-inv {
  background: linear-gradient(180deg,  blue,#003);
}

.mblock_wrapper{
  overflow:hidden;
}

footer {
  background: #003;
  color: white
}

.tr {
  color: white
}

.hide {
  display: none
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />

Click to footer to view the problem
<br> more text body
<footer class="pt-4 px-4 pb-5 pt-5 bg-gradient-inv">
  <div class=container>
    <div class=row>
      <div class="col-12 col-lg-2 top">
        <input class="hide" type="checkbox" id="f1">
        <div>
          <div class="col-12 top"><label class="small nw tr taber pt-2 d-block" for=f1>Footer</label></div>
         <div class ="mblock_wrapper">
          <div class=mblock>
            <div class="col-12"><a class="small nw tr d-block" href=/>1</a>
            </div>
            <div class="col-12"><a class="small nw tr d-block" href=/>2</a>
            </div>
            <div class="col-12"><a class="small nw tr d-block" href=/>3</a>
            </div>
          </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
  </div>