如何解决如何为从JSON数组创建的堆叠式绝对元素添加偏移量？
如何为使用绝对定位堆叠的元素添加偏移量？我希望使用.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});
}
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。