테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

코딩 관련 문의 드립니다. (버튼영역이 겹치는 레이아웃) 채택완료

동물원 9년 전 조회 4,152
답변 3
목록

아래 첨부된 이미지와 같이 1~5번 버튼이 겹쳐져 보이게 하고, 각 버튼에 오버롤 효과를 주고 싶은데요.

버튼이 겹쳐져 있는 영역들이 있어서, 어떻게 구현해야 할 지 모르겠네요.

이런 경우에 어떻게 코딩해야 할까요?

조언 부탁 드려요.

 


 

#그누보드5 #오버롤 #코딩 #태그
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

샤
샤이닝
9년 전

</strong><span style="font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px; background-color: rgb(255, 255, 255);"><!DOCTYPE html></span><br style="box-sizing: border-box; font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><span style="font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px; background-color: rgb(255, 255, 255);"><html></span><br style="box-sizing: border-box; font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><span style="font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px; background-color: rgb(255, 255, 255);"><body></span><br style="box-sizing: border-box; font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><br style="box-sizing: border-box; font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><span class="marked" style="box-sizing: border-box; color: rgb(232, 0, 0); font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><?php<br style="box-sizing: border-box;">echo "My first PHP script!";<br style="box-sizing: border-box;">?></span><br style="box-sizing: border-box; font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><br style="box-sizing: border-box; font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><span style="font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px; background-color: rgb(255, 255, 255);"></body></span><br style="box-sizing: border-box; font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px;"><span style="font-family: Consolas, 'courier new'; font-size: 16px; line-height: 22.4px; background-color: rgb(255, 255, 255);"></html></span><strong style="color: rgb(127, 127, 127); font-family: 돋움, Dotum, sans-serif; font-size: 12px; line-height: normal;">
 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

웨
웨비온
9년 전

port님이 말씀하신것 처럼 버튼별로 클래스를 잡으시고 z-index값과 좌표값을 설정하시면 됩니다.

아래 예제는 참고하세요.

 

 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <style media="screen">

      .wrap{display:block;width:400px;height:500px;padding:20px;background:#ccc;border:1px solid #ddd}

      .btn1{position: absolute;background:#555;width:100px;height:100px;top:20px;left:20px;z-index:10}

      .btn2{position: absolute;background:#999;width:140px;height:140px;top:50px;left:100px;z-index:20}

      .btn3{position: absolute;background:#000;width:130px;height:200px;top:80px;left:180px;z-index:30}

      .btn4{position: absolute;background:#eee;width:100px;height:100px;top:60px;left:250px;z-index:40}

      .btn5{position: absolute;background:#d3690f;width:120px;height:150px;top:120px;left:310px;z-index:50}

      .btn1_b{display:block;width:80px;height:50px;margin:0 auto;padding:10px;text-align:center;color:#d3690f}

      .btn2_b{display:block;width:40px;height:60px;margin:0 auto;padding:10px;text-align:center;color:#d3690f}

      .btn3_b{display:block;width:100px;height:30px;margin:0 auto;padding:10px;text-align:center;color:#d3690f}

      .btn4_b{display:block;width:50px;height:80px;margin:0 auto;padding:10px;text-align:center;color:#d3690f}

      .btn5_b{display:block;width:70px;height:40px;margin:0 auto;padding:10px;text-align:center;color:#d3690f}

    </style>

  </head>

  <body>

    <div class="wrap">

      <div class="btn1">

        <button type="button" name="button" class="btn1_b">01</button>

      </div>

      <div class="btn2">

        <button type="button" name="button" class="btn2_b">01</button>

      </div>

      <div class="btn3">

        <button type="button" name="button" class="btn3_b">01</button>

      </div>

      <div class="btn4">

        <button type="button" name="button" class="btn4_b">01</button>

      </div>

      <div class="btn5">

        <button type="button" name="button" class="btn5_b">01</button>

      </div>

    </div>

  </body>

</html>


로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

p
port
9년 전

제 생각에는 각 버튼을 div로 구성하고 div에 층번호 z-index를 지정해 놓고요.

해당 버튼에 롤오버 했을때 층번호가 기존에 존재하는 층번호보다 1이 크게 해서 위로 오도록 구성하면

어떨까 싶습니다.

롤오버 했을때 층번호를 변경하는 것은 자바스크립트나 제이쿼리를 이용하시면 될 듯 하고요. 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인