카테고리

질문 & 답변
세부 분야

웹 개발
해결 여부

미해결

visibility 대신 z-index

21.01.22 12:49 작성 조회수 113

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2. 인접선택자-텝메뉴-Opacity</title>
  <style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      height: 100vh;
      align-items: center;
    }

    .tab-inner {
      width: 300px;
      height: 350px;
      position: relative;
    }

    .tab-inner input[type='radio'] {
      display: none;
    }

    .tab-inner .content {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: 1s;
    }

    .tab-inner .btn {
      width: 100%;
      text-align: center;
      position: absolute;
      bottom: 0;
    }

    .tab-inner label {
      background-color: lightgrey;
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 50%;
      cursor: pointer;
    }

    .tab-inner input[id='tab1']:checked~.btn label[for='tab1'],
    .tab-inner input[id='tab2']:checked~.btn label[for='tab2'],
    .tab-inner input[id='tab3']:checked~.btn label[for='tab3'] {
      background-color: crimson;
    }

    .tab-inner input[id='tab1']:checked~.slide1,
    .tab-inner input[id='tab2']:checked~.slide2,
    .tab-inner input[id='tab3']:checked~.slide3 {
      opacity: 1;
      z-index: 1;
    }
  </style>
</head>

<body>
  <div class="tab-inner">
    <input type="radio" name="tab" id="tab1" checked>
    <input type="radio" name="tab" id="tab2">
    <input type="radio" name="tab" id="tab3">

    <div class="content slide1">
      <a href="#none1">
        <img src="./image/slide-01.jpg" alt="슬라이드이미지1">
      </a>
    </div>
    <div class="content slide2">
      <a href="#none2">
        <img src="./image/slide-02.jpg" alt="슬라이드이미지2">
      </a>
    </div>
    <div class="content slide3">
      <a href="#none3">
        <img src="./image/slide-03.jpg" alt="슬라이드이미지3">
      </a>
    </div>

    <div class="btn">
      <label for="tab1"></label>
      <label for="tab2"></label>
      <label for="tab3"></label>
    </div>
  </div>
</body>

</html>
선생님 혹시 visibility 자리에 대신 z-index를 넣어서 check 되었을 떄
check된 상품이 제일 위로 올라 오게 하는 방법은 잘못된 방법인가요?
만약 잘못된 방법이 아니라면 둘 중 어느 것이 더 선호 되는 방법인가요 ?
항상 친절한 답변 감사드립니다 ㅠ