# Z-index & Shadow DOM: how stacking works

**URL:** <https://community.embeddable.com/t/z-index-shadow-dom-how-stacking-works/146>\
**Category:** FAQs\
**Created:** [August 28, 2025, 5:56pm UTC](https://community.embeddable.com/t/z-index-shadow-dom-how-stacking-works/146 "2025-08-28T17:56:11Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ella-embeddable](https://dub1.discourse-cdn.com/flex013/user_avatar/community.embeddable.com/ella-embeddable/32/15_2.png) [@ella-embeddable](https://community.embeddable.com/u/ella-embeddable)\
**Post date:** [August 28, 2025, 5:56pm UTC](https://community.embeddable.com/t/z-index-shadow-dom-how-stacking-works/146/1 "2025-08-28T17:56:11Z")

</div>

# Z-index & Shadow DOM: how stacking works

**What’s going on?**  
Shadow DOM creates isolated stacking contexts. To ensure overlays (e.g., dropdowns) render above content below them, rows inside our component receive incrementing `z-index` values. This is intentional.

**Can I turn off the per-row `z-index`?**  
No. It’s required for correct layering within a single Shadow DOM component.

**How do I control which component appears on top at the page level?**  
Set `z-index` on the component’s host/container (outside the Shadow DOM). Don’t override internal row values.

```auto
/* Page-level layering between separate Shadow DOM hosts */
.component-a { position: relative; z-index: 2; } /* above */
.component-b { position: relative; z-index: 1; } /* below */

```

**Gotchas**

- `z-index` only works on positioned elements (`position: relative|absolute|fixed|sticky`).

- Large `z-index` jumps aren’t necessary - just ensure the intended order.

- Keep page-level stacking in the host; leave intra-component stacking to the component.