z-index
177
윤종호
작성한 질문수 5
1
<div class="container">
<div class="items">
<div class="top">
<img src="images/space-01.png">
<p>Mars</p>
</div>
<div class="description">
<p>
화성은 태양계의 네 번째 행성이다. 4개의 지구형 행성 중 하나다. 동양권에서는 불을 뜻하는 화(火)를 써서 화성이라 부르고 로마 신화의 전쟁의 신 마르스의 이름을 따 Mars라 부른다.
</p>
<a href="#none">Read More </a>
</div>
</div>
</div>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
}
.items {
position: relative;
width: 300px;
border: 1px solid red;
}
.top {
width: inherit; height: 200px;
background-color: #333;
}
p { margin: 0; }
.description {
position: absolute;
top: 0; left: 0;
width: inherit; height: 200px;
background-color: #ddd;
z-index: -1;
}
.top 요소랑 .description 을 겹쳐놓은 상황입니다.
이제 .top요소를 z-index: 1; 을 주려 하는데
z-index가 안먹히더라고요 그래서 .description에
z-index: -1; 을 주니깐 작동하더라고요 제가 무엇을
잘못했는지 잘 모르겠어요. 혹시 같은 형제 요소끼리는
z-index가 적용이 안되나요?
답변 1
1
.top에 포지션 속성이 없어서 그렇습니다.
.top에 아래처럼 주시면 .description에 z-index: -1; 안줘도 됩니다.
position: absolute;
top: 0;
left: 0;
z-index: 1;
span 태그에 여백이 들어간 것 같은데 왜 그런건가요?
1
96
5
class 값 한 번에 부여하는법
2
124
1
@media에서의 flex-direction: column으로 세로배치 관련 질문드립니다.
1
104
1
div#css-checker-widget의 해결방
1
101
2
input의 포커스되었을때 검정선이 사라지지 않아요
0
122
2
강의듣는법
1
114
1
아코디언 만들기 100%이하의 화면으로 보았을때
1
105
2
input checked 질문합니다.
0
105
1
Bracket Pair Colorizer - 비주얼 스튜디오
1
200
2
Part 1 영상 안나옵니다
1
125
1
제이쿼리 작동이 안됩니다
1
250
3
강의 내용 질문있습니다.
1
167
2
일정 부분만 주석하는 방법
1
281
2
폰트어썸
1
177
2
인접선택자에 대한 질문드립니다!
1
165
2
delay 적용 안됨
1
161
1
rotateY(360deg)가 적용이 안됩니다!
1
229
2
세로이동할때 height값
1
171
2
폰트어썸이 안되요..
1
553
2
화면 정중앙에 오게끔 할수있나요?
1
197
1
어코디언 네비게이션 중
1
151
1
라이브서버 문제
1
278
2
넷플릭스 어코디언 예제 질문
1
126
1
이번 강의에선 display flex가 무조건 적으로 필요한건가요 ?
1
187
1