CODEWITHSUNDEEP
csspositionreact-native
user1506630
user1506630

Reputation: 405

Overlapping the same element

What I am trying to achieve:

Overlapping circles

I am stuck on trying to solve this issue. Should I define different styles based on the position in the list or would it be possible to solve this by having the same style for all of the items and if so, how would I go about it?

Upvotes: 1

Views: 177

Answers (3)

andreas
andreas

Reputation: 16936

You can simply define a class of elements, that has a specified size, display: inline-block to display in a row and a negative right margin to overlap.

The following is a plain HTML/CSS example to solve your issue. Of course you will have to port that into your React Native application.

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

Upvotes: 3

Alex Belets
Alex Belets

Reputation: 406

You can use the same styles for all elements because when we have row with flex-direction: 'row', first element will be placed at start of row.

Do not use negative margins! It possible will not work on IOS.

Next, you should remember that in react-native every next element will be over the previous one. So the only thing you should do is image positioning inside small block.

Upvotes: 0

David Setz
David Setz

Reputation: 200

The easiest (not the best way) would be something like this. If you use a preprocessor you could write this 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>

Upvotes: 1

Related Questions