# Carousel component taking foreground priority in a flex container **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 4, 2024, 7:48pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375 "2024-04-04T19:48:27Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\ **Post date:** [April 4, 2024, 7:48pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375/1 "2024-04-04T19:48:27Z")
Can anyone help me understand how to prevent these underlying components from taking foreground priority? Blue button is at “top of z” (first component in the view) w/ negative offset to achieve overlay in flex container. I can only click it where _other_ component are not (visible = false) ![CleanShot 2024-04-04 at 14.38.48](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/9/0954208f5b97bdc2d63833e46b2cff850142f985.gif) ![CleanShot 2024-04-04 at 14.45.29](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba9abf91833c9bdd17e0de52d356cdf95a6d9d22.png) is it as simple as `!important`? ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 4, 2024, 8:04pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375/2 "2024-04-04T20:04:27Z")
There's a lot of blue in there. Where's the "Blue button"? And what is being overlaid and why? ---
**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\ **Post date:** [April 4, 2024, 8:30pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375/3 "2024-04-04T20:30:55Z")
Intent is for the “whole thing” to be a button, with multiple instances in a flex repeater serving as a combo mini-dashboard and “control area” target/acquisition method. Button is intended to overlay all the other components without having to resort to coordinate container/view canvas Previous revision had button at the bottom, but hoping to save some space for info and increase interaction surface area. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [April 4, 2024, 8:56pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375/4 "2024-04-04T20:56:44Z")
Have you considered using an event on the view's root? Right-click on the view | Configure Events | onClick and add your actions. Now the view is, effectively, one great big button. Just be aware that Navigation actions occur asynchronously with script actions and can give unexpected results. If you've got script as well as navigation then it's best to do any navigation by script so that you're in control of the order of events. ---
**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\ **Post date:** [April 4, 2024, 9:04pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375/5 "2024-04-04T21:04:03Z")
indeed, _further_ prior revision used `.onClick`, but button affords some useful features: context-sensitive text/icon, visibility/opacity on hover, one-shot confirm functionality, and generally fun "target acquisition" experience. Suppose I just need to inspect the dom a bit. ---
**Author:** ![hunterdg](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/hunterdg/32/67774_2.png) [@hunterdg](https://forum.inductiveautomation.com/u/hunterdg)\ **Post date:** [April 5, 2024, 5:28pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375/6 "2024-04-05T17:28:19Z")
well, turns out I may have incorrectly named this post - it appears at least part of the problem is that the carousel component somehow forces itself to the “top” of the z-order, despite being assigned to ‘1’ in the DOM. Haven’t wrapped my head around that yet, but guessing it has something to do with stacking contexts. Unsure if I want to go down that rabbit hole…. ---
**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\ **Post date:** [April 5, 2024, 7:47pm UTC](https://forum.inductiveautomation.com/t/carousel-component-taking-foreground-priority-in-a-flex-container/88375/7 "2024-04-05T19:47:58Z")
If you assign `pointer-events: none` to the carousel component, does that do any good?