이게 왜 되고 왜 안되는지 모르겠습니다

안녕하세요 강사님 정말 오랜만에 질문 글을 올립니다

제가 지금 강사님 강의 들으면서, 그걸 적용할 프로젝트를 하나 따로 만들어서 진행하는데 여기서 이상한곳에서 막혀서요

글로 표현이 다 될 수 있을지는 모르겠으나 일단 한번 적어 보겠습니다

메뉴아이템 오브젝트 안에서는 캐릭터의 이미지, 이름, 데미지 등이 보여지는 UI가 있습니다

그냥 텍스트만 있는게 아니라, 텍스트UI가 보여지는 곳 아래에 칸을 보여주려고, 이미지 UI를 따로 넣었습니다

image UI들 위로, 텍스트 UI를 집어 넣었습니다, 차일드 오브젝트로서요

그런데 Sorting Layer 때문인지, 이 텍스트들이 이미지에 가려서 안보이더라고요

찾아보니까 Canvas 컴포넌트로 sorting layer를 오버라이딩 할 수 있다고 해서 그렇게 했습니다

가장 마지막 Sorting Layer는 UI 이고, 이미지 UI들에는  order 1번, 텍스트 UI에는 2번을 부여했습니다

이제 문제는 없을거라 생각을 했는데 한가지 문제가 생겼습니다
저기 위에 말씀드린 이미지 UI - 텍스트UI 들을 덮도록 언락버튼을 만들었습니다
이 버튼에는 Button, 및 Image 컴포넌트 외에
Layout Element 컴포넌트(Ignore Layer - true, Layout priority - 0)과 Canvas 컴포넌트(Pixel Perfect - inherit, Override Sorting - false)이렇게 추가를 했습니다

여기서 이상한게, 만약에 이 Canvas 컴포넌트에서 Override Sorting을 활성화시키면

Scrollview의 Viewport에 있는 Mask 컴포넌트의 영역 밖에다가 지금 이 메뉴 아이템 오브젝트를 생성했을 때, 이 버튼이 보입니다

 이걸 활성화 시키지 않으면 안보이고요 (이게 제가 원하는 결과물이죠)

그런데 또 이 Canavs 컴포넌트를 아예 꺼버리거나 제거하면, Sorting Layer 문제인건지, Mask 영역 내부에서도 안보입니다

그리고 이 버튼이 눌리질 않습니다 

혹시 설명을 해주실 수 있을까요?