bug: Alerts are always displayed behind loading indicators making them inaccessible

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

I have a use-case where a loading indicator (`ion-loading`) is being displayed during a data import process. If the data already exists, an alert (`ion-alert`) is then displayed, requesting confirmation to overwrite the data. Once the alert is dismissed, the loading indicator continues to be displayed until the process completes.

In this scenario, when the alert is displayed, it is behind the loading indicator's overlay. This means that not only is the alert obscured by the loading indicator, even if its buttons are visible, they cannot be clicked by the end user. (Note that the `ion-alert` is *always* created after the `ion-loading` has been displayed.)


### Expected Behavior

Ideally, each overlay-based component would be assigned a z-index higher than any previously-created component, ensuring that they are 'stacked' on-screen in the order that they are created. Indeed, this is how it is described in another - presumably, now out-of-date - issue (see https://github.com/ionic-team/ionic-framework/issues/22339#issuecomment-712206529).

### Steps to Reproduce

1. Clone the [test repo](https://github.com/davidgeary/zindex-test)
2. Run the application with `ng serve`
3. Open _http://localhost:4200/_ in a web browser

The web app will open its home page, displaying first an `ion-loading` component, then displaying an `ion-alert` component.

You should see that the alert is behind the loading indicator, preventing it from being seen clearly and stopping its buttons from being clicked.

### Code Reproduction URL

https://github.com/davidgeary/zindex-test

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\Xxxxxxxxxxx\AppData\Roaming\nvm\v20.14.0\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 8.4.0
@angular-devkit/build-angular : 18.2.12
@angular-devkit/schematics : 18.2.12
@angular/cli : 18.2.12
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.2.0
@capacitor/android : not installed
@capacitor/core : 6.2.0
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v20.14.0 (C:\Program Files\nodejs\node.exe)
npm : 10.7.0
OS : Windows 10

### Additional Information

From the code, it appears that the overlay-based components have their z-indexes hard-coded, with each component being assigned a z-index of a 'base' value plus the overlay id of the component. So while components using the same base value will appear stacked in the order they are created, overall the components have an on-screen hierarchy enforced by the base value:

- `ion-toast`: [60000](https://github.com/ionic-team/ionic-framework/blob/470decca7b6b89ef74095ef0bb7909b93640cd78/core/src/components/toast/toast.tsx#L718)
- `ion-loading`: [40000](https://github.com/ionic-team/ionic-framework/blob/470decca7b6b89ef74095ef0bb7909b93640cd78/core/src/components/loading/loading.tsx#L347)
- `ion-action-sheet`: [20000](https://github.com/ionic-team/ionic-framework/blob/470decca7b6b89ef74095ef0bb7909b93640cd78/core/src/components/action-sheet/action-sheet.tsx#L375)
- `ion-alert`: [20000](https://github.com/ionic-team/ionic-framework/blob/470decca7b6b89ef74095ef0bb7909b93640cd78/core/src/components/alert/alert.tsx#L749)
- `ion-modal`: [20000](https://github.com/ionic-team/ionic-framework/blob/470decca7b6b89ef74095ef0bb7909b93640cd78/core/src/components/modal/modal.tsx#L944)
- `ion-picker-legacy`: [20000](https://github.com/ionic-team/ionic-framework/blob/470decca7b6b89ef74095ef0bb7909b93640cd78/core/src/components/picker-legacy/picker.tsx#L363)
- `ion-popover`: [20000](https://github.com/ionic-team/ionic-framework/blob/470decca7b6b89ef74095ef0bb7909b93640cd78/core/src/components/popover/popover.tsx#L697)

So regardless of which component is created first, `ion-loading`s will always appear above `ion-alert`s.

(Also, because the z-index is assigned directly as a `style` attribute to each individual component, overriding it requires a specific custom CSS class where the `z-index` property is marked as `!important`.)


While there is *possibly* an argument that `ion-toast`s should always appear at the top of any stack, I think overlay components should - as a general rule - always appear in the order that they are created. Changing the base value of the `ion-loading` component to 20000 would accomplish this.

Reproduce the issue with the linked zindex-test app, then inspect the z-index assignments in core/src/components/loading/loading.tsx and core/src/components/alert/alert.tsx, along with the other overlay files listed in the report. Confirm the intended stacking behavior and ensure an alert created after loading is visible and clickable without breaking the stated toast behavior.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.