CSS에서 요소를 겹칠 때 어떤 요소가 위로 올라올지를 결정하는 것이 z-index입니다. 하지만 실제 레이아웃에서는 단순히 z-index 숫자만 비교하는 게 아니라 stacking context라는 보이지 않는 독립 그룹 구조까지 함께 이해해야 정확한 결과를 만들 수 있습니다.이 글에서는 z-index 기본 개념과, 실전에서 반드시 알아야 할 stacking context까지 한 번에 정리해보겠습니다. 📌 position이 아직 헷갈린다면 z-index와 stacking context을 배우기 전에 이 글부터 보고 오는 걸 추천할게요! 😊 [🎨CSS] CSS position 속성 총정리display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 positi..

display 속성으로 레이아웃을 구성하는 방법을 익힌 뒤는 요소를 세밀하게 배치하고 조정할 수 있는 position 속성을 제대로 이해해야 합니다. 이 글에서는 position 속성의 기본 개념부터 static, relative, absolute, fixed, sticky 각각의 차이와 특징을 살펴보겠습니다.  📌 display가 아직 헷갈린다면 position을 배우기 전에 이 글부터 보고 오는 걸 추천할게요! 😊  [🎨CSS] CSS display 속성 총정리CSS는 기본 개념을 제대로 정리하지 않으면 나중에 flex나 grid 같은 레이아웃을 다룰 때 계속 헷갈리게 됩니다. 다르게 말하면 한 번만 제대로 정리하면 그 이후로는 어떤 레이아웃도 훨씬 쉽게 이sim-plism.tistory.com..