Fix modal backdrop overlap in sticky container

[PakinamElBanna]

Description

There was a reported issue here that the modal backdrop overlaps the modal when it's used in a sticky container.

Motivation & Context

The issue mentioned renders the modal completely non-interactive once launched; The user cannot interact or even dismiss the modal

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-38564--twbs-bootstrap.netlify.app/docs/5.3/components/modal/

Related issues

Closes #38561

[julien-deramond]

Thanks for providing a PR @PakinamElBanna but all the values end by 5 or 0 with a certain logic. 1019 doesn't fit in this logic. Moreover, the $zindex-* vars are ordered by ascending values.

There's no detailed explanation of the impact of this modification on the existing code. The order that was chosen before is difficult to change without regressions, please try to explain the new order in detail; a lot of combinations are possible.

[PakinamElBanna]

@julien-deramond makes sense, I just noticed the chronological order of the z-indexes variables. Thing is, I guess this leaves us with the situation that we either give it a 1010 (but accepting the fact that sticky elements will sit on top of the backdrop - which wouldn't make much sense I think - or maybe let go of this element and give the modal a low opacity background. Would you go for something as drastic as this though? 🤔