Блог

Я использую отрицательное поле, чтобы некоторые элементы игральных карт накладывались друг на друга, создавая визуальный эффект, похожий на то, как выглядит комбинация игральных карт в реальной жизни.

Проблема здесь в том, что отрицательная маржа определена в vw . Это означает, что по мере увеличения размера экрана значение единицы vw становится больше, а отрицательное поле увеличивается, в результате чего карточки больше перекрываются. Это противоречит моим намерениям — по мере расширения экрана карты должны соответственно распределяться и больше перекрываться по мере сужения экрана.

Если я вместо этого использую абсолютное значение, подобное px , перекрытие будет оставаться постоянным при изменении размера экрана, что также нежелательно.

Я потратил много часов на пробную версию и исправление ошибок, и мне еще предстоит придумать схему, которая работает правильно.

Как вы можете уменьшить отрицательный запас по мере увеличения экрана с помощью CSS или с помощью JS, если CSS не может сделать это самостоятельно?

Codepen

Вы могли бы объединить clamp() с relative позиционированием. Возможно, вам потребуется немного скорректировать значения, чтобы сделать его привлекательным, но это основная концепция.

 :root {
  --cardWidth: 200px;
  
  --min: calc(var(--cardWidth) / 8);
  --var: 7.5vw;
  --max: calc((var(--cardWidth) / 4) * 7);
  
  --overlap: clamp(
    var(--min),
    var(--var),
    var(--max)
  );
}

body {
  display: grid;
  place-items: center;
  margin: 0;
}

.w {
  display: flex;
}

[class*=card] {
  height: 300px;
  width: var(--cardWidth);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px -1px #000;
}

.card-2 {
  position: relative;
  left: calc((var(--cardWidth) * -1)   var(--overlap));
}  

 <div class="c"></div>

<div class="w">
  <div class="card"></div>
  <div class="card-2"></div>
</div>  

Вы можете просто использовать flex box для этого. Попробуйтеhttps://css-tricks.com/snippets/css/a-guide-to-flexbox / .