如何为从 JSON 数组创建的堆叠绝对元素添加偏移量？

Question

如何为使用绝对定位堆叠的元素添加偏移量？我希望使用 .map 函数创建的每张卡片彼此之间略有偏移，这样很明显卡片可以被刷过。是否可以这样做？如果可以，怎么做？

主要的 reactjs 代码：

   <ReactSwing className='Stack'>
                        {Data.map((Projects, index) => {
                            return <div className='Cards'>
                                <div className='cardHead'>
                                    <h1>{Projects.workName}</h1>
                                    {Projects.workTech.map((Tech, index) => { return <p>{Tech}</p> })}
                                </div>
                                <p>{Projects.workDescription}</p>
                            </div>
                        })}
                    </ReactSwing>

Sass 样式：

 .Stack {
        width: 100%;
        height: 100vh;
    }
    .Cards {
        position: absolute;
        width: 85%;
        height: 85vh;
        background: white;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        margin-left: auto;
        margin-right: auto;
        margin-top: 20%;
        left: 0;
        right: 0;
        text-align: center;
        border-radius: 12px;
        overflow: hidden;
}

沙盒：https://codesandbox.io/s/sleepy-sunset-jqjst?file=/src/App.js

Answer 1

在 Sass 中，您可以使用 @for 规则迭代子项。

工作示例：https://codesandbox.io/s/twilight-darkness-zulys?file=/src/styles.scss

HTML:

<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>

Sass:

body {

  background-color: #444444;
}

.container {

  position: relative;

  .box {

    $SIZE: 100px;
    $OFFSET: 55px;

    width: $SIZE;
    height: $SIZE;
    line-height: $SIZE;
    text-align: center;
    background-color: purple;
    color: white;
    border: 1px solid white;
  
    @for $i from 0 to 5 {

      &:nth-child(#{$i + 1}) { //CSS index starts at 1

        position: absolute;
        top: calc(#{$i} * #{$OFFSET});
        left: calc(#{$i} * #{$OFFSET});
      }
    }
  }
}

如何为从 JSON 数组创建的堆叠绝对元素添加偏移量？

How to add an offset to stacked absolute elements created from a JSON array?

css

json

reactjs

sass

array.prototype.map