# Modal on Top Level

**URL:** <https://forums.realmacsoftware.com/t/modal-on-top-level/44391>\
**Category:** RapidWeaver Elements\
**Created:** [August 23, 2024, 11:02am UTC](https://forums.realmacsoftware.com/t/modal-on-top-level/44391 "2024-08-23T11:02:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jomakri](https://avatars.discourse-cdn.com/v4/letter/j/8797f3/32.png) [@Jomakri](https://forums.realmacsoftware.com/u/Jomakri)\
**Post date:** [August 23, 2024, 11:02am UTC](https://forums.realmacsoftware.com/t/modal-on-top-level/44391/1 "2024-08-23T11:02:29Z")

</div>

When I click on a Modal Component, it is not on the top level, but is covered by the Menu Section and the Card Component. My page structure: Section and inside a container with a menu (sticky), Grid with Button, HTML and Modal. Additionally a Card with Grid. I use Card to select a different background than in the container. How do I get the Modal component to the top level?

---

<div class="post-metadata">

**Author:** ![anon68150607](https://avatars.discourse-cdn.com/v4/letter/a/4bbf92/32.png) [@anon68150607](https://forums.realmacsoftware.com/u/anon68150607)\
**Post date:** [August 23, 2024, 11:12am UTC](https://forums.realmacsoftware.com/t/modal-on-top-level/44391/2 "2024-08-23T11:12:47Z")

</div>

As it’s possible to put a modal anywhere within a page structure, and it’s not always clear what elements draw on top of other elements, having the ability to set an elements layer order (aka `z-index` in CSS) would be useful to ensure that elements are drawn in the right stacking order. This should also be a property common to all visible elements.

Keeping tracking of which `z-index` number an element is set to can be a little confusing, but if it were possible to name layers (ie. background, content, modal, etc) and _visually_ arrange them in order (ie. top, modal: 3, content: 2 and bottom, background: 0) that would likely make it much more user friendly.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [August 23, 2024, 2:29pm UTC](https://forums.realmacsoftware.com/t/modal-on-top-level/44391/3 "2024-08-23T14:29:14Z")

</div>

This is a know issue - there are layering issues across multiple components depending on how they are being used.

We did previously have a z-index control on all components, but this was difficult and confusing for users to manage and understand.

We have a ticket and an idea on how we can solve this nicely (in a way that shouldn’t require any user action), we just haven’t gotten to it yet! 🙂