jonbeo 님의 블로그

웹사이트를 제작하다 보면, 박스나 요소들이 서로 겹치는 상황을 종종 만나게 됩니다.이럴 때 어떤 요소를 위에 보이게 할지 결정해주는 속성이 바로 z-index입니다.이번 포스팅에서는 z-index의 기본 개념부터 적용 조건, 실무에서 자주 겪는 문제까지 하나씩 차근차근 정리해보겠습니다. ✅ z-index란 무엇인가요?z-index는 겹쳐지는 요소들 사이의 순서를 지정하는 CSS 속성입니다.숫자가 높을수록 위쪽에 쌓여 사용자에게 먼저 보이게 됩니다..box1 { position: absolute; z-index: 1;}.box2 { position: absolute; z-index: 10;} 위 코드에서는 .box2가 .box1보다 위에 표시됩니다. ✅ z-index가 동작하려면?z-index는 단..

CSS에서 레이아웃을 만들다 보면 "이 요소 왜 여기 있어?", "왜 고정이 안 되지?" 같은 혼란이 생기죠.그 핵심 원인은 바로 position 속성을 정확히 이해하지 못해서입니다.이번 포스팅에서는 CSS position 속성의 5가지 값인static, relative, absolute, fixed, sticky를 실제 예제와 함께 정리해드립니다. ✅ position: static (기본값)모든 요소는 기본적으로 position: static입니다.별도로 좌표를 지정해도 무시되며, HTML의 문서 흐름에 따라 배치됩니다.div { position: static; top: 20px; /* ❌ 적용되지 않음 */} ✅ position: relative기존 위치(문서 흐름)를 기준으로 상대적으로 이동합..