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

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

매번 어딘지 모르게 z-index의 값을 결정하고 있으면, model가 숨어 버리거나, tooltp가 어디서나 나타나거나… 날이 지나면서 여러가지 사고가 일어납니다.

고치는 경우에도 해명까지 시간이 걸리는데, 전혀 관계가 없는 개소의 겹침이 이상해지거나 버립니다.

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

미리 z-index가 필요할 것 같은 요소를 변수로 준비해 둡니다.
큰 단위로 준비해, 세세한 값의 조정은 변수 + 1 등으로 대응합니다.

//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 /