겹치거나 넘치는 요소 다루기 <z-index, overflow>

✏️ z-index 속성

요소의 쌓임 순서를 정의
정수 값을 지정하여 쌓임 맥락에서의 레벨을 정의
position 속성이 정의되어 있는 요소에게 사용

first(red) > second(orange) > third(yellow) > fourth(green) 순으로 위로 겹쳐짐

예시 코드 실행 결과

---

✏️ overflow 속성

요소의 크기가 정해져 있는 상태에서 내부 콘텐츠의 크기가 요소보다 커질 경우 넘침 현상 발생
이러한 문제를 해결하기 위한 속성

🔎 over flow 유형

1️⃣ visible : 기본값, 영역을 벗어난 콘텐츠를 그대로 보여줌

예시 코드 실행 결과

2️⃣ hidden : 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 함

예시 코드 실행 결과

3️⃣ scroll : 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 하고 잘려진 콘텐츠를 진행 방향으로 스크롤을 생성

예시 코드 실행 결과

4️⃣ auto : 웹 브라우저의 설정 값을 따름, 데스크톱 브라우저에서는 주로 scroll로 처리