position 속성은 태그를 어떻게 위치 시킬지를 정의하고, z-index는 어느 객체가 앞으로 나오고 뒤에 나올지 배치 순서를 결정하는 속성입니다. z-index는 포토샵으로 생각한다면 레이어를 생각할 수 있으며, 값이 클 수록 상단에, 값이 작을 수록 하단에 위치합니다. z-index는 position 속성이 적용된 요소에서만 작동합니다. 먼저 position의 속성에 대해 설명하자면, position 속성이 없는 태그들은 순서대로 쌓입니다. 하지만 position 속성이 있는 태그라면 없는 태그들보다 위에, 나오는 순서대로 쌓입니다. position 속성(기본값인 static 제외)과 z-index 값이 모두 존재하는 태그라면 z-index 값을 비교해 z-index 값이 큰 태그가 위에 쌓입니다. 주의해야 할 점은, z-index 값이 커도 부모 태그의 z-index가 우선된다는 점입니다.
position 속성
- static: position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용되는데, 이는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. top, left, bottom, right과 같은 속성값은 position 속성이 static일 때는 무시됩니다.
- relative: 말 그대로 상대적으로 배치해 주는 속성으로 요소가 원래 위치에 있을 때의 상하좌우로부터 얼마나 떨어지게 할지를 지정할 수 있는 속성입니다.
- absolute: 뜻은 절대적이라는 뜻이지만 해당 요소는 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. DOM 트리를 따라 올라가다가 position 속성이 static이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정됩니다. 만약 그러한 요소가 없다면, DOM 트리의 최상위에 있는 <body> 요소가 배치 기준이 됩니다. 또한 absolute 속성이 지정된 요소는 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더이상 상호작용하지 않게 된다는 특징도 있습니다.
- fixed: 말 그대로 고정된 위치에 배치할 수 있는 속성으로 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면이 됩니다. top, left, bottom, right 속성으로 각각 브라우저 상단, 좌측, 하단, 우측으로 부터 해당 요소가 얼마나 떨어져있는지 결정합니다. absolute와 마찬가지로 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않는 특징이 있습니다.
- sticky: 요소가 스크롤링될 때 적용되는 속성으로 지정한 위치에 붙어 움직이지 않게 고정할 수 있습니다.
Reference
https://bitsofco.de/how-z-index-works/
https://medium.com/baakademi/css-position-property-69d0596baf3c
반응형
'기술면접' 카테고리의 다른 글
| 객체 지향 프로그래밍이란 무엇인가요? (0) | 2021.12.23 |
|---|---|
| event loop에 대해서 설명하세요. (0) | 2021.12.21 |
| 리액트 라우터같은 Client Side Routing 에 대해서 설명하세요. (0) | 2021.12.17 |
| 리액트에 있는 라이프사이클과 각 라이프사이클의 역할을 설명하세요. (0) | 2021.12.15 |
| state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요. (0) | 2021.12.13 |
