jquery - 如何在不影响 Bootstrap 面板类的情况下将 堆叠在一起？

Question

我需要将字段集堆叠在一起，以便我可以使用 jquery 调用下一个字段集。显示第一个字段集，而隐藏其他两个字段集。当我使用 position:absolute 时，它​​会堆叠在一起，但 Bootstrap 面板会受到影响，并且表单会超出面板。我该怎么做才能使面板不受影响。？

#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

您是否正在寻找类似堆叠式的东西？

#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>