z-index 규칙

[WaiNaat]

사건의 발단: #182 (comment)

이번에 모달과 토스트를 만들면서 z-index가 적용되었는데요

z-index가 편하긴 하지만 한번 사용하게 되면
'토스트는 항상 위에 있어야 하고, 모달은 토스트보다는 밑에 있어야 하지만 select보다는 위에 있어야 한다'
처럼 다양한 컴포넌트에서 z-index에 대한 의존성이 생깁니다.

이 과정에서 z-index 사용에 대한 규칙이 통일되지 않은 상태로 사용하게 되면 앱이 커지면서 꼬일 수 있겠다는 생각이 들어요.

theme에 zIndex 항목을 추가해서 z-index를 사용하는 비슷한 컴포넌트끼리 같은 수준을 갖도록 하는 것이 어떨까요?

유명한 규칙이 있나 찾아봤는데 bootstrap의 z-index 규칙이 괜찮은 것 같아 밑에 적어둡니다.

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

이런 변수들을 theme에 추가해서 사용하면 괜찮을 것 같은데 어떠신가요?

[bassyu]

규칙 야무지네요! 매우 좋습니다! 👏