重叠相同的元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重叠相同的元素相关的知识，希望对你有一定的参考价值。
我想要实现的目标：
我坚持试图解决这个问题。我应该根据列表中的位置定义不同的样式，还是可以通过为所有项目设置相同的样式来解决这个问题，如果是这样，我该如何解决？
答案
您可以简单地定义一个具有指定大小的元素类，display: inline-block显示在一行中，负右边距重叠。
以下是一个简单的html / CSS示例来解决您的问题。当然，您必须将其移植到React Native应用程序中。
.a {
display: inline-block;
height: 50px;
width: 50px;
margin-right: -20px;
background: gray;
border-radius: 50%;
border: 2px solid white;
box-shadow: 0 8px 15px #999;
}<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>另一答案
最简单的（不是最好的方式）就是这样的。如果您使用预处理器，则可以编写此DRYer。
ul {
padding: 20px 0;
list-style: none;
clear: both;
}
.item {
float: left;
position: relative;
}
.item img {
border-radius: 50%;
overflow: hidden;
position: relative;
}
.item:nth-child(1) img {
background: #aaa;
border-radius: 50%;
}
.item:nth-child(2) img {
background: #bbb;
left: -20px;
}
.item:nth-child(3) img {
background: #ccc;
left: -40px;
}
.item:nth-child(4) img {
background: #ddd;
left: -60px;
}<ul>
<li class="item"><img src="" width="50" height="50"></li>
<li class="item"><img src="" width="50" height="50"></li>
<li class="item"><img src="" width="50" height="50"></li>
<li class="item"><img src="" width="50" height="50"></li>
</ul>另一答案
您可以对所有元素使用相同的样式，因为当我们有flex-direction行时：'row'，第一个元素将放在行的开头。
不要使用负边距！它可能不适用于ios。
接下来，您应该记住，在react-native中，每个下一个元素都将超过前一个元素。所以你唯一应该做的就是在小块里面进行图像定位。
以上是关于重叠相同的元素的主要内容，如果未能解决你的问题，请参考以下文章