Chevauchement le même élément

Question

Ce que je suis en train de réaliser:

Je suis coincé à essayer de résoudre ce problème. Devrais-je définir des styles différents en fonction de la position dans la liste ou serait-il possible de résoudre cela en ayant le même style pour tous les éléments et si oui, comment pourrais-je m'y prendre?

Answer 1

Vous pouvez simplement définir une classe d'éléments, qui a une taille spécifiée, display: inline-block pour afficher dans une ligne et une marge de droite négative pour chevaucher.

Voici un exemple HTML/CSS pour résoudre votre problème. Bien sûr, vous devrez le porter dans votre application 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>

Answer 2

Le moyen le plus (pas la meilleure façon) serait quelque chose comme ça. Si vous utilisez un préprocesseur, vous pouvez écrire ce 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>

Answer 3

Vous pouvez utiliser les mêmes styles pour tous les éléments parce que quand nous avons rangée en direction flex: « rangée », premier élément sera placé au début de la ligne. N'utilisez pas de marges négatives! Cela ne fonctionnera pas sur iOS. Ensuite, vous devez vous rappeler que dans react-native, chaque élément suivant sera supérieur au précédent. Donc, la seule chose à faire est de positionner l'image dans un petit bloc.