코딩 관련 문의 드립니다. (버튼영역이 겹치는 레이아웃)
본문
아래 첨부된 이미지와 같이 1~5번 버튼이 겹쳐져 보이게 하고, 각 버튼에 오버롤 효과를 주고 싶은데요.
버튼이 겹쳐져 있는 영역들이 있어서, 어떻게 구현해야 할 지 모르겠네요.
이런 경우에 어떻게 코딩해야 할까요?
조언 부탁 드려요.
답변 3
제 생각에는 각 버튼을 div로 구성하고 div에 층번호 z-index를 지정해 놓고요.
해당 버튼에 롤오버 했을때 층번호가 기존에 존재하는 층번호보다 1이 크게 해서 위로 오도록 구성하면
어떨까 싶습니다.
롤오버 했을때 층번호를 변경하는 것은 자바스크립트나 제이쿼리를 이용하시면 될 듯 하고요.
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>
<!DOCTYPE html>
<html>
<body>
<?php
echo "My first PHP script!";
?>
</body>
</html>
