[css] 이미지위에 button 추가하기

 

position: relative;	위치를 계산할때 static의 원래 위치부터 계산한다.
position: absolute;	원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.

 

 

<div id="testImg">
  <img src="/images/test.png" width="700" height="350" alt="테스트이미지" />
  <button class="btn1" type="button" onclick="javascript:sensorBtnClick('btn1');">버튼1</button>
  <button class="btn2" type="button" onclick="javascript:sensorBtnClick('btn2');">버튼2</button>
</div>

<style>
#testImg{
  postiion : relative;
  width: 700px;
  height: 350px;
}
button.btn1 {
  position: absolute;
  top: 170px;
  left : 35px; 
}
button.btn2 {
  position: absolute;
  top: 85px;
  left : 95px;
}
</style>

 

 

---

결과