z-index속성에 대해 질문드립니다.
537
10 asked
항상 고생하십니다.
다름이 아니고 이번에 z-index에 대해 궁금한 점이 생겼습니다.
1) z-index 속성은 position 선언 이후이에 사용이 가능한 속성인지 궁금합니다.
2)예제에서 modal-gnb에 가려진 컨텐츠들을 올리기 위해 z-index속성을 ".trigger"에 주었습니다.
제 생각은 z-index를 active클래스에 주지 않고 .trigger에 주었으니 active가 없어도 .modal-gnb보다 .trigger가 밑에 있으면 안된다고 생각합니다.
하지만 active를 추가 하지 않은 .trigger는 z-index속성이 100임에도 불구하고 modal-gnb에 가려지게 되는데 이러한 이유가 궁금합니다.
항상 감사합니다. 연말 잘 마무리 하셨으면 좋겠습니다.
Answer 3
0
.trigger {
width: 60px;
height: 30px;
position: absolute;
right: 50px;
top: 50px;
cursor: pointer;
z-index: 100;
}
.trigger span {
position: absolute;
width: 100%;
height: 4px;
background-color: #000;
transition: 0.5s;
}
.trigger span:nth-child(1) {
top: 0%;
}
.trigger span:nth-child(2) {
top: 50%;
width: 80%;
}
.trigger span:nth-child(3) {
top: 100%;
}
.trigger.active span {
background-color: #fff;
}
.trigger.active span:nth-child(1) {
top: 50%;
transform: rotate(45deg);
}
.trigger.active span:nth-child(2) {
opacity: 0;
}
.trigger.active span:nth-child(3) {
top: 50%;
transform: rotate(-45deg);
}
/* modal-gnb */
.modal-gnb {
position: absolute;
background-color: rgba(0, 0, 0, 0.76);
width: 100%;
height: 100vh;
top: 0;
left: 0;
display: none;
}
코드는 위와 같습니다.
코드대로는 modal-gnb가 fadeIn이 되고난 이후 .tigger.active가 되면서 잘 보입니다.
여기서 임의로 z-index를 주석처리하면 modal-gnb밑으로 내려가고,
다시 z-index:100을 설정하면 modal-gnb위로 올라오는 것을 확인했습니다.
하지만 이 상황에서 .trigger.active가 아닌 .trigger 상태여도 modal-gnb위에 trigger가 있어야 한다고 생각하는데 그렇지 않습니다.
0
1) z-index 속성은 position 선언 이후이에 사용이 가능한 속성인지 궁금합니다.
네. 기본값이 position: static에서는 사용할 수 없습니다. 그리고 z-index의 기본값은 0입니다.
두번째 질문에는 z-index를 .modal-gnb에 주지 않았으면 z-index: 0입니다. 그리고 .trigger에 z-index: 100이면 .trigger가 .modal-gnb 위로 올라와야 합니다. 만약 올라오지 않으면 코드에 잘못된 부분이 있는거에요.
아래 부분 코드 확인해보세요. 그리도 안되시면 코드를 복사해서 올려주세요.
class 값 한 번에 부여하는법
2
80
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
69
1
div#css-checker-widget의 해결방
1
60
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
79
2
강의듣는법
1
74
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
68
2
input checked 질문합니다.
0
77
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
140
2
Part 1 영상 안나옵니다
1
90
1
제이쿼리 작동이 안됩니다
1
199
3
강의 내용 질문있습니다.
1
120
2
일정 부분만 주석하는 방법
1
211
2
폰트어썸
1
134
2
인접선택자에 대한 질문드립니다!
1
129
2
delay 적용 안됨
1
135
1
rotateY(360deg)가 적용이 안됩니다!
1
186
2
세로이동할때 height값
1
139
2
폰트어썸이 안되요..
1
487
2
화면 정중앙에 오게끔 할수있나요?
1
169
1
어코디언 네비게이션 중
1
127
1
라이브서버 문제
1
230
2
넷플릭스 어코디언 예제 질문
1
105
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
158
1
active 관련 질문
1
147
2