Prevent overlapping divs in css

I have a div checkbox-container inside a loop and I'm trying to use position:absolute to make them not interfere other elements.

But the problem is all the divs (like 20 divs) are in the same position I have tried to use left, bottom, top and others still not working. I have no idea why this doesn't work. Can anyone help me please?

Edit: I use position absolute because if I click select then the checkbox pops up in each product without overlapping but they destroy <p><b>Available : In Stock</b></p> style that is why I want to use position:absolute

Blade

<button class="Select-Deselect" type="button">Select</button>

@foreach($products as $product)
    <div class="checkbox-container" style="display:none;">
        <div class="checkbox">
            <label><input type="checkbox" value="" name="checked[]"></label><br />
           </div>
      </div>
<p><b>Available :  In Stock</b></p>
@endforeach

Javascript

<script>
$(".Select-Deselect").click( function(e) {
  if ($(this).html() == "Select") {
    $(".checkbox-container").css('display', 'block');
    $(this).html('Deselect');
  } else {
    $(".checkbox-container").css('display', 'none');
    $(this).html('Select');
  }
  return false;
});
</script>

via Chebli Mohamed