Предотвратить перекрытие div в css - PullRequest
Новая
       5

Предотвратить перекрытие div в css

0 голосов
/ 10 июля 2020

У меня есть div checkbox-container внутри al oop, и я пытаюсь использовать position:absolute, чтобы они не мешали другим элементам.

Но проблема во всех div (например, 20 div ) находятся в том же положении, что и я пытался использовать left, bottom, top, а другие по-прежнему не работают. Понятия не имею, почему это не работает. Может ли кто-нибудь помочь мне, пожалуйста?

Изменить: я использую абсолютную позицию, потому что, если я нажимаю кнопку «Выбрать», флажок появляется в каждом продукте без перекрытия, но они разрушают стиль <p><b>Available : {{$product->stock}} In Stock</b></p>, поэтому я хочу использовать position:absolute

Лезвие 

<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="{{$product->id}}" name="checked[]"></label><br />
           </div>
      </div>
<p><b>Available : {{$product->stock}} 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>

Ответы [ 2 ]

2 голосов
/ 10 июля 2020

Вашему элементу оболочки требуется relative позиция, проверьте пример 

/* top wrapper element needs > position: relative !! */
.wrapper{
  position: relative
}
.checkbox-container{
  position: absolute
}
.wrapper div:nth-child( 1 ){ top: 10px; left: 10px }
.wrapper div:nth-child( 2 ){ top: 20px; left: 20px }
.wrapper div:nth-child( 3 ){ top: 30px; left: 30px }
.wrapper div:nth-child( 4 ){ top: 40px; left: 40px }
.wrapper div:nth-child( 5 ){ top: 50px; left: 50px }
.wrapper div:nth-child( 6 ){ top: 60px; left: 60px }
.wrapper div:nth-child( 7 ){ top: 70px; left: 70px }
.wrapper div:nth-child( 8 ){ top: 80px; left: 80px }
.wrapper div:nth-child( 9 ){ top: 90px; left: 90px }
.wrapper div:nth-child( 10 ){ top: 100px; left: 100px }
<div class="wrapper">
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
    <div class="checkbox-container">
        <div class="checkbox"><label> <input type="checkbox"></label></div>
    </div>
</div>
0 голосов
/ 10 июля 2020

Если вы используете position:absolute, указанные элементы не будут затронуты и не повлияют на поток веб-страницы, поэтому все div будут в одном месте, и вы не достигнете своей цели, какой бы она ни была, ответьте, чтобы я мог видеть к чему вы стремитесь

...