重叠相同的元素答案

【问题标题】：Overlapping the same element重叠相同的元素
【发布时间】：2017-06-28 08:41:08
【问题描述】：

我想要达到的目标：

我一直在努力解决这个问题。我应该根据列表中的位置定义不同的样式，还是可以通过为所有项目设置相同的样式来解决这个问题，如果是，我将如何处理？

【问题讨论】：

【解决方案1】：

您可以简单地定义一类元素，它具有指定的大小，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>

【讨论】：

React-native（见问题标签）不支持标准的 web html 和 css。
@AlexBelets OP 没有提供代码，所以我决定给出一个简短的简单示例，说明基本样式（OP 明确要求）的外观。我认为，随着答案被接受，这就是这里所需要的。但无论如何感谢您的评论，相应地更新了我的答案。

【解决方案2】：

最简单（不是最好的方法）是这样的。如果你使用预处理器，你可以编写这个 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>

【讨论】：

【解决方案3】：

您可以对所有元素使用相同的样式，因为当我们有带有 flex-direction: 'row' 的行时，第一个元素将被放置在行的开头。

不要使用负边距！在IOS上可能不行。

接下来，您应该记住，在 react-native 中，每个下一个元素都将在前一个元素之上。所以你唯一应该做的就是在小块内定位图像。

【讨论】：

你为什么不赞成我的回答？你看到标签“react-native”和“react-native-stylesheet”了吗？这与网络无关。这都是关于移动开发的。 html sn-ps 的答案不正确！