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

编程问答 2022-08-11

问题描述

如何为使用绝对定位堆叠的元素添加偏移量？我希望使用.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>

无礼的风格：

 .Stack {
        width: 100%;
        height: 100vh;
    }
    .Cards {
        position: absolute;
        width: 85%;
        height: 85vh;
        background: white;
        Box-shadow: 0 1px 3px rgba(0,0.12),0 1px 2px rgba(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

解决方法

在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>

无礼： 

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});
      }
    }
  }
}
array.prototype.mapjsonreactjsreactjssass