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)
is it as simple as !important?
There's a lot of blue in there. Where's the "Blue button"?
And what is being overlaid and why?
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.
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.
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.
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….
If you assign pointer-events: none to the carousel component, does that do any good?