LearnFit

 YouTube, [ㅈ] 제트인덱스 z-index | 코딩가나다 | 빔캠프

서원석님의 학습노트

제트인덱스 z-index | 코딩가나다 | 빔캠프

#전체

#개발자

#프론트엔드

#html

#css

#html5

#css3

#웹사이트

#web

#웹사이트 제작

#web frontend

#front-end

#홈페이지 제작

00:00*height이 명시적이면 자식 요소가 부모 요소 위치를 벗어났을 때 부모 요소가 커지는 것이 아니라 자식 요소가 숨겨집니다.

03:44세 개의 낙타 요소에 margin-bottom: -40px 적용 마크업 상으로 아래 있는 것이 위에 오게 되므로 화면 상에서도 세 번째, 두 번째, 첫 번째 순으로 낙타가 겹쳐지게 됩니다.

04:47세 번째 낙타 요소를 margin-top으로 더 아래에 위치시킵니다. 그 결과, .oasis에 가려지게 됩니다. .oasis 요소는 마크업 상으로 .desert 보다 더 아래에 위치하므로 위에 오게 됩니다.

05:22세 번째 낙타요소에 position: relative를 적용합니다. 그 결과, 마크업 순서에 상관없이 .oasis보다 앞으로 튀어나오게 됩니다.

05:39position: relative는 마크업 순서에 상관없이 요소가 앞으로 튀어나오게 합니다. *offset(top, bottom, left, right) 적용도 가능해집니다. *offset 적용 시, 시각적으로는 이동하지만 다른 요소와의 위치적 관계엔 영향을 주지 않습니다.

05:56position: relative를 지우고 transform: translate(0)을 입력합니다. 그 결과, 마찬가지로 세 번째 낙타 요소가 .oasis 위에 위치하게 됩니다. *transform property에 어떤 값이 들어가도 상관없습니다.

06:06쌓임 맥락에 관한 MDN 문서 내용

06:24transform: translate(0)을 지우고 opacity: 0.9를 입력합니다. 그 결과, 마찬가지로 세 번째 낙타요소가 .oasis 위에 위치하게 됩니다.

07:06여기까지 정리, 1. 마크업 상에서 아래에 있는 것이 기본적으로 z축 상에서 상위에 위치하게 됩니다. 2. 마크업 순서에 상관없이 position: relative가 적용되면 그 요소가 z축의 최상위에 위치하게 됩니다. 3. 마크업 순서에 상관없이 transform이 적용되면 그 요소가 z축의 최상위에 위치하게 됩니다. 4. 마크업 순서에 상관없이 opacity가 적용되면 그 요소가 z축의 최상위에 위치하게 됩니다. 5. 그 외에 MDN 문서를 통해 마크업 순서에 영향을 주는 스타일 속성들을 확인할 수 있습니다.

07:59첫 번째 낙타 요소와 .parasol 간의 상황에 따른 z축 관계 1. 첫 번째 낙타요소에 transform: translateY(-100px)이 적용된 경우: 첫 번째 낙타요소가 .parasol 위에 위치합니다. 마크업 순서 상 더 아래에 있고 tranform이 적용되었기 때문입니다. 2. 첫 번째 낙타요소에 transform: translateY(-100px)이 적용되었고 .parasol에 position: relative가 적용된 경우: .parasol에 relative가 적용되었지만 마크업 순서 상, 낙타가 z축에서 우선됩니다.(transform, relative 간의 우선순위가 아닙니다, 이 경우 마크업 위치가 결정 요인입니다)

08:42지금까지 마크업 순서에 상관없이 position: relative, transform, opacity를 적용하면 다른 요소들보다 z축 상에서 상위에 위치하게 된다는 것이 내용이었는데요, 이 관계를 뛰어넘을 property로 zIndex가 있습니다. *조건으로 position: static이 아닌 값이 적용되어 있어야합니다.(relative, absolute, fixed, sticky) *tranform, opacity는 조건이 아닙니다. *zIndex는 숫자입니다. -1도 가능

10:02.parasol, 첫 번째 낙타 간의 z축 우위 경쟁에서 둘에만 position: relative, z-index 적용 되었을 때는 z-index 값이 더 높은 요소가 z축 상에서 상위에 표시되었었는데요, 첫 번째 낙타의 부모에 position: relative와 z-index가 적용된 후부터는 첫 번째 낙타보다 .parasol이 z축 상에서 우위를 갖게 되었습니다. *부모 요소에 z-index가 적용되면 자식 요소들에 적용된 z-index는 자식 요소들끼리 경쟁할 때만 의미가 있어집니다. 즉, 아무리 자식 요소에 적용된 z-index 값이 높아도 부모 바깥의 요소와의 z-index 싸움에서 질 수 있다는 것이죠.

14:19PARADISE h1 요소에 초록색 밑줄을 적용하는 것에 있어서 가상요소 ::before를 적용했습니다. h1에 relative를 적용했고 가상요소에 absolute를 적용해서 가상요소의 기준은 h1이 되었구요. 그런데 z-index를 적용하지 않으니 PARADISE 위에 덮여집니다. 이것을 해결하려고 z-index: -1를 적용하니 .parasol 뒤로 가버리면서 화면에 보이지 않게 됩니다. 부모 요소에 z-index가 없을 때는 global하게 z-index가 적용되므로 그런 것이죠. 부모 요소인 h1 요소에 z-index: 1을 적용하니 global하게 비교되던 z-index: -1이 이제는 h1 요소 내에서만 비교됩니다. 결국 초록 밑줄은 PARADISE 보다는 아래에 위치하지만 .parasol 보다는 위에 위치하게 되는 것이죠.

15:31flex-item, grid-item인 요소는 position에 값 지정 없이 z-index를 사용할 수 있습니다.

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기