-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
z-index
22.05.04 15:53 작성 조회수 108
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
코딩웍스(Coding Works)
지식공유자2022.05.04
.top에 포지션 속성이 없어서 그렇습니다.
.top에 아래처럼 주시면 .description에 z-index: -1; 안줘도 됩니다.
position: absolute;
top: 0;
left: 0;
z-index: 1;
답변 1