title: Jetpack Compose Row - Draw over child element siblings
body: <p>I have a <code>LazyColumn</code> with <code>Rows</code> as children</p>
  <p>I'm trying to draw a circle on just one of the row elements that overlaps the other children but the circle is being drawn below the siblings to the left and bottom</p>
  <p>I have tried playing around with <code>Modifier.zIndex</code> with no luck.</p>
  <p>Here's what I have:</p>
  <pre><code>@Composable
  fun HorizontalGrid() {
      val days = (1..300).toList()
      val weekChunks: List&lt;List&lt;Int&gt;&gt; = days.chunked(7)
      LazyColumn {
          items(weekChunks) { days: List&lt;Int&gt; -&gt;
              Week(days)
          }
      }
  }
  
  @Composable
  fun Week(days: List&lt;Int&gt;) {
      Row(horizontalArrangement = Arrangement.SpaceEvenly, modifier = Modifier.fillMaxSize()) {
          days.forEach {
              Day(it)
          }
      }
  }
  
  @Composable
  fun Day(dayOfWeek: Int) {
      Box(
          modifier = Modifier
              .size(48.dp)
              .padding(4.dp)
              .background(Color.LightGray)
      ) {
          Text(
              modifier = Modifier
                  .drawWithContent {
                      if (dayOfWeek == 17) {
                          drawContent()
                          drawCircle(Color.Gray, radius = 150F, center = Offset(50f, 50f))
                      }
                  },
              text = dayOfWeek.toString()
          )
      }
  }
  </code></pre>
  <p>Here's what I get:</p>
  <p><a href="https://i.stack.imgur.com/H9HR9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H9HR9.png" alt="enter image description here" /></a></p>
  <p>What I need is the circle to be over all of the squares.</p>