title: Difference between a ZStack or using .overlay()
body: <p>What is the difference between using a <code>ZStack</code> versus using the <code>.overlay()</code> modifier.</p>
  <p>Apple says:</p>
  <p><code>ZStack</code> = &quot;A view that overlays its children, aligning them in both axes.&quot;</p>
  <p><code>.overlay</code> = &quot;Layers a secondary view in front of this view.&quot;</p>
  <p>Some examples:</p>
  <pre><code>ZStack(alignment: .bottom) {
      Image(systemName: &quot;folder&quot;)
          .font(.system(size: 55, weight: .thin))
      Text(&quot;❤️&quot;)
  }
  </code></pre>
  <pre><code>Image(systemName: &quot;folder&quot;)
      .font(.system(size: 55, weight: .thin))
      .overlay(Text(&quot;❤️&quot;), alignment: .bottom)
  </code></pre>
  <p>Not considering code size, is there a distinct purpose where one must be used over the other?</p>