如何堆叠 <fieldset> 在彼此之上而不影响引导程序的面板类？

Question

I need to stack the fieldsets on top of each other so that i can call next fieldsets using jquery. First fieldset is shown while the other two are hidden. When i user position:absolute, it will stack on top of each other but the bootstrap panel gets affected and the form goes outside of the panel. how do i do this such that the panel doesnt get affected.?

#msform fieldset {
  /*stacking fieldsets above each other*/
  position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
  display: none;
}

<div class="panel panel-default">
  <div class="panel-body">
    <!-- ===================================== -->
    <!-- MULTI STEP FORM -->


    <form id="msform" class="black-color">
      <!-- fieldsets -->
      <fieldset >

      </fieldset>

      <fieldset>

      </fieldset>

      <fieldset>

      </fieldset>
    </form>
    <!-- MULTI STEP FORM -->
    <!-- ===================================== -->
  </div>
</div>

jsfiddle here

Answer 1

Are you looking for something like this, as in stacked?

 #msform fieldset { /*stacking fieldsets above each other*/ position: absolute; width: 100px; height: 100px; } /*Hide all except first fieldset*/ /*#msform fieldset:not(:first-of-type) { display: none; } */ #msform fieldset:nth-child(1) { top: 5px; left: 5px; } #msform fieldset:nth-child(2) { top: 10px; left: 10px; } #msform fieldset:nth-child(3) { top: 15px; left: 15px; } 

 <div class="panel panel-default"> <div class="panel-body"> <!-- ===================================== --> <!-- MULTI STEP FORM --> <form id="msform" class="black-color"> <fieldset > </fieldset> <fieldset> </fieldset> <fieldset> </fieldset> </form> <!-- MULTI STEP FORM --> <!-- ===================================== --> </div> </div>