z-index

  <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가 적용이 안되나요?
 
 
인프런 커뮤니티 질문&답변
