z-index property not working on element inside <ion-segment-button></ion-segment-button>


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-icon name="document-text"></ion-icon>
          <div id="helpParent" (click)="test2()" style="
              background: red;
              width: 200px;
              height: 200px;
              z-index: 999999;
          "><i id="helpChild" (click)="test2()" class="far align-vertically fa-question-circle"
              style="cursor: pointer;width: 24px;height: 24px;font-size: 20px;color: rgb(6, 54, 85);margin-left: 10px;z-index: 9999;"></i>

I want to make red div clickable before ion-segment button.


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;

Answered By – Mr. Stash

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published