# Separate Background and Content Layers

Use absolute positioning for background media and relative positioning for content. This keeps layers independent and z-index predictable.

```liquid
{% comment %} BAD: background and content mixed in one flow {% endcomment %}
<div class="relative">
  <img src="{{ section.settings.image | image_url: width: 1920 }}" class="w-full">
  <div class="mt-[-200px] px-24">
    <h2>{{ section.settings.title }}</h2>
  </div>
</div>

{% comment %} GOOD: separate layers with z-index {% endcomment %}
<div class="relative overflow-hidden">
  {%- comment -%} Background layer: fills parent, sits behind content {%- endcomment -%}
  <div class="absolute inset-0 z-0">
    {%- render 'picture', image: section.settings.image, mobile_width: 768, desktop_width: 1920 -%}
  </div>

  {%- comment -%} Content layer: above background {%- endcomment -%}
  <div class="relative z-10 px-24 py-48">
    <h2>{{ section.settings.title }}</h2>
  </div>
</div>
```

Z-index scale: `z-0` background, `z-[1]` overlay/gradient, `z-10` content, `z-20` interactive elements, `z-50` modals.