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
class="test">
<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()" 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>
</div>
</ion-segment-button>
1条答案
按热度按时间hlswsv351#
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.