CSS: Absolute Positioning issue - css

Question

I am trying to create a form of sorts with overlapping content. I created all the elements of the form, the idea is to position them absolute and visible:hidden and then use JS to toggle the visibility when buttons are clicked.
My issue is the when I apply position:absolute on any div, its will mess up the layout of the children in that div
Any fix?
<div class="row justify-content-center">
<form id="form-bizOwner">
<div class="container" id="B-firstQ">
<div class="row justify-content-center mb-3">
<div class="col-12">
<div class="row">
<div class="col-2 B-red-circle-div px-0">
<div class="B-red-circle">01</div>
</div>
<div class="col-8 B-input-field form-group">
<label for="B-firstQ">Age</label>
<input type="number" class="form-control" id="B-firstQ" min="18" placeholder="Enter your age">
</div>
</div>
</div>
<div class="col-4 mt-4">
<button type="button" class="btn btn-danger px-5 py-2" id="B-firstNext">NEXT</button>
</div>
</div>
</div>
<div class="container" id="B-secondQ">
<div class="row justify-content-center mb-3">
<div class="col-12">
<div class="row">
<div class="col-2 B-red-circle-div px-0">
<div class="B-red-circle">02</div>
</div>
<div class="col-10 B-input-field form-group">
<label>Are you a business owner in Nigeria?</label>
<div class="row">
<div class="col-12">
<div class="form-check form-check-inline">
<input class="form-check-input d-none" type="radio" name="B-secondQOptions" id="secondQYes" value="option1">
<label class="form-check-label btn btn-outline-info px-4" for="secondQYes">Yes</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input d-none" type="radio" name="B-secondQOptions" id="secondQNo" value="option2">
<label class="form-check-label btn btn-outline-info px-4" for="secondQNo">No</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 mt-4">
<button type="button" class="btn btn-danger px-5 py-2" id="B-secondNext">NEXT</button>
</div>
</div>
</div>
</form>
</div>