Search code examples
csspositionreact-native

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?

Solution

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