왜 너가 위에 있는 거야...? Z-index를 scss로 정리해 보았습니다.

왜 너가 위에 있는 거야...? 문제가 다발

변수를 준비하고 반드시 변수 사용

//Variables.scss

//変数例
$z-modal: 100;
$z-overlay: 90;
$z-header: 50;
$z-footer: 20;
$z-floating-btn: 20; 
$z-base: 1; 

실제로 사용하면 이런 느낌

.header {
  z-index: $header; //50
}

.modal {
  z-index: $z-modal; //100
}

.modal__overlay {
  z-index: $z-overlay; //90
}

//afterの記事要素をbeforeよりも更に上にしたい時
.checkbox {
  &::before {
    z-index: $z-base; //1
  }
  &::after {
    z-index: $z-base + 1; //2
  }
}

소감

변수를 너무 늘리면 반대로 복잡해지므로 불변의 큰 단위로 준비하는 것이 좋습니다.

덤

페이지내에서 사용되고 있는 z-ndex의 값을, 개발 툴상에서 일람 표시해 주는 신 플러그인이 있습니다!
htps : // 긴펜. 이 m / 2018/06/20 /에서 v와 ls - ~ x /