NativeScript tap on element with z-index

Question

I am trying to create mapping over image for the areas to tap on. It's for a demo for now and I don't have time to build out all of the native parts.

For now I am overlaying a StackLayout on top of an Image. The StackLayout tap. I tried a suggestion to put into aGridLayout` but the tap event still doesn't work. The lightgray background appears over the area I want.

<GridLayout rows="*"
            columns="*">
  <StackLayout row="0"
                col="0"
                width="262"
                height="36"
                marginLeft="30"
                marginTop="147"
                backgroundColor="lightgray"
                style="z-index: 2"
                (tap)="onTap()">
  </StackLayout>
  <Image row="0"
            col="0"
            src="~/images/map.svg"
            width="100%"
            height="255"
            style="z-index: 1"></Image>
</GridLayout>

Answer 1

Changing places of the elements fixes it.

<GridLayout rows="*"
            columns="*">
  <Image row="0"
            col="0"
            src="~/images/map.svg"
            width="100%"
            height="255"
            style="z-index: 1"></Image>
  <StackLayout row="0"
                col="0"
                width="262"
                height="36"
                marginLeft="30"
                marginTop="147"
                backgroundColor="lightgray"
                style="z-index: 2"
                (tap)="onTap()">
  </StackLayout>
</GridLayout>