z-index의 문제점

Gil·2022년 11월 13일
0

CSS

목록 보기
2/2
post-thumbnail

프로젝트를 진행하면서 css중 z-index는 겹치는 무언가가 없다면 반드시 쓰이게 되는데

구조 정리를 제대로 하지못한다면 완전 먼 산으로 가버리는 경우가 많다.
(아무리 수치를 올려도 더 위로 올라가지 않는 등등...).



1. 기본적인 z-index

일반적으로 z-index는 position 속성이 같이 있어야 동작을 한다.

.myContents{
	//position이 없으면 z-index는 무용지물
	position:relative;
    z-index:999;
}



2. 한번에 모아서 정리하자!

원래부터 z-index를 한곳에 모아서 관리 하는것이 좋다. 원래 scss가 아닌 css 쓸때도 한것인데 컨텐츠 별로 한개씩 들어 가 있으면 찾아다니기도 어렵고 많아지면 혼동 되기 시작한다.

/* CSS z-index*/
.content div{position:relative;}
.myContents1{z-index:1;}
.myContents2{z-index:2;}
.myContents3{z-index:3;}

/*contents*/
.content .myContents1{
	width:100px;
    height:200px;
    backgorund:#f00;
}
.content .myContents2{
	width:150px;
    height:100px;
    backgorund:#fbba33;
}
.content .myContents3{
	width:300px;
    height:300px;
    backgorund:#ccc;
}
/* SCSS z-index*/
//한곳에 모으거나
$zIndex:1;
.myContents1{z-index:$zIndex;}
.myContents2{z-index:#{$zIndex + 1};}
.myContents3{z-index:#{$zIndex + 2};}

/*contents*/
.content{
	//변수를 사용할 수 있으니 변수롤 참조시키고 흩뿌리기!
	$zIndex2:1;
	position:relative;
    
	.myContents1{
      width:100px;
      height:200px;
      backgorund:#f00;
      z-index:$zIndex2;
	}
    .myContents2{
      width:150px;
      height:100px;
      backgorund:#fbba33;
      z-index:#{$zIndex2 + 1};
  	}
    .myContents3{
      width:300px;
      height:300px;
      backgorund:#ccc;
      z-index:#{$zIndex2 + 2};
  	}
}



3. 첫번째 자식요소는 위 두번째 자식 요소는 아래

위의 이미지 같은 경우가 가장 머리 아픈 순간이다.

  • A,B는 각각의 라인 이미지와 함께 묶여있다.
<div class="A">
  <img src="img">
  <img src="line">
</div>

<div class="B">
  <img src="img">
  <img src="line">
</div>
  • 이상태에서는 여러가지 방법이 있지만(두개를 전부 통 이미지로 하는 등) A,B 각각의 모션 넣기와 리사이징했을때 라인 위치가 정확히 맞지 않다.

3.1 해결책

내가 작업하면서 알게된 팁(?)

보통은 A와 B가 부모이기 때문에 z-index를 준 뒤 자식에게도 z-index를 주면 된다고 생각한다.

하지만 부모의 z-index(층)가 먹히면 자식의 z-index 수치를 아무리 올려도 부모 층을 이길수 없다.

(가독성을 위해 position 속성은 생략하겠슴다.!)

.A{
    z-index:1;
    
    img{
     // .A와 .B 사이에 이미 B가 z-index가 우위여서
     // 아래처럼 자식요소 수치를 높혀도 이미지는 B위로 올라오지 않는다.
     z-index:999999;
    }
}
.B{
    z-index:2;
}

그래서 내가 사용했던 방법은 이렇다.

  1. 부모(A,B)의 z-index를 제거한다.
  2. 자식요소들에게만 z-index로 계층을 생성한다.
.A{
    //제거
    //z-index:1;
    
    img{
       z-index:3;
    }
    line{
       z-index:1;
    }
}


.B{
    //z-index:2;
    img{
        z-index:2;
    }
}

3.2 문제점


3.2.1 계층 깨짐 문제

여기에도 문제점이 있다. A,B에 transform속성이 먹히면 이 계층구조가 깨진다.

아직까지 이것에 대한 해결책은 모르지만 transform 때문에 계층이 깨진다는 사실을 처음알았다.

때문에 transform으로 모션을 줬던것을 top으로 바꾸면서 해결은 됐지만 근본적인 원인은 아직 까지 모르곘다.

translateZ 문제 인가 싶어서 translate3d로 0을 줬지만 안됐다.

📌 아시는분은 댓글로 해결책좀....


3.2.1 css가 먹히는 순서(?) 문제 (렌더링 순서 문제인가...)

마우스로 가리키는 부분을 보면 모션이 어느정도 재생된 뒤 설정한 계층으로 잡힌다.

하.... 저에게 해결 방법을 주세요.


마무리

3.1번이 여러분과 공유할 꿀팁이구 혹시 문제점 해결 방법을 하시는분은 댓글로 ㅎㅎ.. 감사합니다.

profile
길길기리길기릭릭릭리리길릭릴긱릭리길기리길길

0개의 댓글