Z-index Usage

[DamlaDemir]

Describe the bug
The select component doesn't appear correctly.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://6267ebb4dd54f5004a65f14a-xabmjaqqco.chromatic.com/?path=/docs/components-pagination--basic-usage
2. Go to select section.
3. Click show code.
4. Click select.

Screenshots

Solution
To fix this problem, we should increase the popover's z-index value in select. Z-index is a common problem. We should set as correctly all of our components' z-index values. We can research the best practices on this topic.

[olkeoguz]

I agree @DamlaDemir,
Although just setting z-index to 2 here solves this problem, we might need to organize a hierarchy and maybe a documentation for setting z-indexes as this one has a potential of being a bigger problem, once our design system gets bigger and used in several projects.
@muratcorlu @leventozen

[DamlaDemir]

I've converted this issue into a discussion. We can discuss the best practice for the z-index in this discussion.

Firstly, we should describe the components which need the z-index and their order on the axis. At this point, @buseselvi may help us, for now, when I check I saw the select, tooltip, dropdown,split buttons anddatepicker.

There are some solutions for z-index in these links. You can check this;

https://dev.to/mimafogeus2/a-better-way-to-manage-z-indexes-1nf
https://www.smashingmagazine.com/2021/02/css-z-index-large-projects/

@leventozen @olkeoguz @muratcorlu

[muratcorlu]

I can also add Nord Design System as an example here: https://nordhealth.design/tokens/#z-index

[muratcorlu]

This is implemented with #482