Skip to content

CSS: stacking

.--stack-topmost — z-index 깊이 유틸리티 — .--stack-<level> (deepest, below, above, topmost) — 단독으로 사용하거나 모든 컴포넌트에 체인으로 연결할 수 있어 수작업으로 조정한 숫자 대신 레이어가 예측 가능하게 쌓입니다.

Source: index.ts

사용법

css
@import "@pantoken/components/utilities.css";

예제들

html
<div class="--stack-topmost">Always on top.</div>

수정자

수정자설명
.--stack-above기본 흐름 위에 있습니다.
.--stack-below기본 흐름 아래에 있습니다.
.--stack-deepest가장 낮은 스태킹 깊이.
.--stack-topmost가장 높은 스태킹 깊이 (오버레이, 메뉴).

사용된 토큰

Token타입
--instui-component-view-stacking-above<integer>1
--instui-component-view-stacking-below<integer>-1
--instui-component-view-stacking-deepest<integer>-9999
--instui-component-view-stacking-topmost<integer>9999