배치(2)

만약 요소를 뷰포트를 기준으로 배치하고 싶다면, 이전 글에서 작성한 대로 position을 absolute로 작성한 후 모든 부모 요소들의 position을 static으로 작성해야만 할까?? 아니다.

fixed 속성 값을 사용하면 부모 요소가 어떤 position 값을 가지고 있든 뷰포트를 기준으로 요소를 배치하게 된다.

그리고 뷰포트를 기준으로 요소를 배치하기 때문에 스크롤을 내리더라도 계속 같은 위치에 배치되어 있는 것을 볼 수 있다.

그렇기 때문에 스크롤을 내려도 항상 사용자에게 보여져야하는 요소들은 position: fixed를 이용해서 배치하면 되겠다.

 

<요소 쌓임 순서>

만약 여러 요소들이 겹쳐지게 되면 어떤 요소가 위로 올라오게 될까?

1. 먼저 position 속성이 부여된 요소가 제일 위로 올라오게 된다.

2. 만약 두 요소 모두 position 속성이 부여되어 있다면 z-index 속성의 값이 높을 수록 위로 올라오게 된다.

3. z-index 속성 값 마저 같다면 HTML에서 나중에 작성된 요소가 더 위로 올라오게 된다.

이때 1번에서 우선하면, 2번이나 3번이 아무리 더 우선되게 작성되더라도 1번에서 우선한 요소가 위로 올라오게 된다.

 

2번 요소에만 position 값을 absolute로 부여하게 되면 1번 기준에 따라 position 값이 부여된 요소가 제일 위로 올라오게 되므로 2번 요소가 제일 위에 쌓여있는 것을 볼 수 있다.

1번 요소에 역시 position 값을 relative로 부여했지만, 이전과 같은 결과가 출력되는 것을 확인할 수 있다.

1번 요소, 2번 요소 모두 1번 기준을 만족했기 때문에 2, 3번 기준을 살펴보게 되는데 두 요소 모두 z-index 속성 값은 별도로 부여되지 않았으므로 3번 기준에 따라 HTML 구조 상 더 나중에 선언된 2번 요소가 더 위로 올라오게 되는 것이다.

1번 요소에 z-index값을 부여하게 되면, 2번 기준에 따라 z-index 속성의 값이 더 높은 1번 요소가 2번 요소보다 더 위에 쌓이게 되는 것을 볼 수 있다.

3번 요소에 역시 position을 부여하게 되면, 2번 요소와 3번 요소 모두 1번 기준을 만족하게 되고 두 요소 모두 z-index 속성 값이 없기 때문에 2번 기준에서 역시 같은 우선순위를 가지게 된다. 그러나 HTML에서 3번 요소가 더 뒤에 선언되었기 때문에 3번 기준에 따라 3번 요소가 더 위로 올라오게 된다.

 

주의할 점은 1번 기준에서 이미 어떤 요소가 우선하게 되면 2,3번 기준은 볼 필요 없이 1번 기준에서 우선한 요소가 더 위에 쌓이게 된다. 같은 원리로 2번 기준에서 어떤 요소가 우선하게 되면 3번 기준은 볼 필요 없이 2번 기준에서 우선한 요소가 더 위로 쌓이게 된다.

요소를 위로 쌓기 위해서 무작정 z-index 값만 높게 부여하는 경우가 있는데 그것은 요소 쌓임 원리를 이해하지 못한 것이다.