Organise CSS Z-index

[SajidAlamQB]

Related to: #2014

Description

We use z-index everywhere and just add random number that works. It has become cumbersome to debug or fix any styling as z-indexes being added on top of each other.

Development notes

Introduced specific z-index variables in variables.scss to replace hard-coded values throughout the codebase.

Introduced $base, $above, and $below variables to create a flexible system for defining z-index values. This method provides a clear and scalable way to layer elements relative to each other, avoiding conflicts and magic numbers:

$base: 0;
$above: 1;
$below: -1;

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[jitu5]

@SajidAlamQB
In this PR we are removing hardcoded z-index values and moved to _variables.scss file, But we are not using $base: 0; $above: 1; $below: -1; concept right ?

[rashidakanchwala]

Look's good to me :) Much clearer now . thanks

[SajidAlamQB]

@SajidAlamQB In this PR we are removing hardcoded z-index values and moved to _variables.scss file, But we are not using $base: 0; $above: 1; $below: -1; concept right ?

Yes, that is correct.

[jitu5]

Thanks @SajidAlamQB.