Introduction
드롭다운 컴포넌트가 있는 헤더를 작업하고 메인에 position : relative가 선언된 컴포넌트를 두었는데 드롭다운의 z-Index를 높여도 메인의 컴포넌트 위로 오지 않는 문제가 있었습니다.
DOM을 확인한 결과 헤더를 position : fixed로 두고 z-Index를 선언하지 않아서 메인과 헤더의 위계가 정의되지 않아 헤더의 자식 컴포넌트인 드롭다운 컴포넌트가 메인의 위로 오지 못했습니다.
어찌보면, 당연한 내용이지만 우연찮게 이슈를 발견한 계기로 정의하려고 합니다.
1. Default
// no-1, 2, 3 > width : 100px; height : 100px;
// no-1 > margin-bottom : -50px;
// no-3 > margin-top : -50px;
<div className="no-1" />
<div className="no-2" />
<div className="no-3" />
위의 예제에서 각 객체들은 z-Index가 정의되어 있지 않지만 나중에 오는 객체가 이전 객체의 위에 자리하게 됩니다. 이는 각 객체의 계층은 DOM에 정의된 순서에 따라 결정되며 규칙에 의하면 나중에 오는 객체는 앞의 객체의 위에 자리하게 됩니다.
2. Position
// no-1, 2, 3 > width : 100px; height : 100px;
// no-1 > margin-bottom : -50px;
// no-2 > position : relative;
// no-3 > margin-top : -50px;
<div className="no-1" />
<div className="no-2" />
<div className="no-3" />
다음은 no-2 객체에 position :relative를 정의했을 경우입니다. 아직 z-Index를 정의하지 않았지만 no-2 객체가 no-3 객체의 위로 올라온 것을 알 수 있습니다. 이는 어떠한 객체에 position이 정의되면 Stacking Order Context를 재정의하기 때문입니다.
3.Transform
// no-1, 2, 3 > width : 100px; height : 100px;
// no-1 > margin-bottom : -50px; transfrom : rotate(45deg);
// no-2 > position : relative;
// no-3 > margin-top : -50px; transfrom : rotate(45deg);
<div className="no-1" />
<div className="no-2" />
<div className="no-3" />
이번에는 transform이 정의된 경우입니다. no-1 객체에 transform이 정의된 경우 첫번째 이미지와 같이 no-1은 여전히 no-2 객체 아래에 존재합니다. 하지만, no-3의 경우 transform이 정의되자 no-2 위로 올라오는 것을 알 수 있습니다.
이를 통해 transform을 정의하는 경우에도 Stacking Order Context가 새로 정의됨을 알 수 있습니다.
Rules
우리는 위와 같은 과정을 통해 DOM 안에 존재하는 객체들의 Stacking Order Rule에 대해서 대략적으로 파악할 수 있게 되었습니다.
기존 z-Index를 none이라고 임의로 정의한다면, DOM의 객체들은 Default룰로 나중에 오는 객체가 가장 위에 자리하게 됩니다. 이때 position, transform 등과 같이 Stacking Order Context를 새로 정의하는 CSS가 정의되면 z-index : 0이라고 생각하고 z-index : none < z-index :0이라고 볼 수 있습니다.
4. Parent-Child
마지막으로, 부모 - 자식 객체와 부모와 동일한 계층의 객체사이의 z-Index에 대해서 확인해보겠습니다.
// parent 1, 2 & child > width : 100px; height : 100px;
// parent-1 > position : relative; z-index : 1
// parent-2 > positon : relative; z-index : 10
// child > position : absolute : top : 100px; z-index : 100
<div className="parent-1">
<div className="child" />
</div>
<div className="parent-2" />
각 객체의 z-Index를 확인하면 child > parent-2 > parent-1의 순서로 정의되어 있습니다.
하지만, 이미지를 확인하면 child가 나오지 않는 것을 알 수 있습니다. (child는 parent-2의 뒤에 존재)
마지막으로 이를 통해 자식 객체는 부모 객체의 z-Index에 종속적으로 존재하는 것을 알 수 있습니다.
