뒤로 가기
홈으로 이동
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를 사용할 수 있습니다.
✔ 학습 완료

이런 러닝패스는 어때요?

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

서원석의 프로필 이미지
서원석
의 학습노트

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

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기