z-index property is not being applied for the elements inside ion-segment-button.

I tried changing positions of elements and setting z-index to 999999 and button z-index to -1. It's not working though.

          <ion-segment-button
          >
          <ion-icon name="document-text"></ion-icon>
          <ion-label>Test</ion-label>
          <div id="helpParent" (click)="test2()" style="
              background: red;
              width: 200px;
              height: 200px;
              z-index: 999999;
          "><i id="helpChild" (click)="test2()" 
              style="cursor: pointer;width: 24px;height: 24px;font-size: 20px;color: rgb(6, 54, 85);margin-left: 10px;z-index: 9999;"></i>
          </div>
          </ion-segment-button>

CodePudding user response：

The button is rendered inside shadow root and the container element has a rule of pointer-events: none; that is why the test2 method is being called.

Add the following code in the style.css file, test2 method should get called when you click on the inner icon, and remove the click event from the helpParent element to avoid multiple calls.

ion-segment-button::part(native) {
  pointer-events: all;
}