html 이미지 위에 글씨나 이미지 올리려면 어떻게 해야되나요?
본문
position: relative; 주면 창모드 일때 위치값이 위로 점점 올라가더라구요 ㅜㅜ
답변 3
<div class="imgbox">
<img src="~~">
</div>
예를들어 이런 구조라 하면
imgbox 클래스에 position : relative 를 설정하구요 ,
imgbox 안에 span 태그등을 이용해 텍스트 넣으시구요
그 span 태그에는 position : absolute 를 설정하시고 위치값 잡으시면 되요
<div class="imgbox" style="position:relative;">
<img src="~~">
<span style="position:absolute;top:50%;left:50%;">lorem ipsum</span>
</div>
position 속성의 값이 absolute 인 요소들은 position 속성의 값을 가지고있는 상위 부모요소 중 가장 가까운 부모요소의 위치를 기준으로 동작합니다~
간단하게
넣고싶은 부분의 배경을 position: relative; 로 설정하는거고 width height 설정하시고
position: absolute 준것은 바로위의 relative 설정된것의 넓이 높이에따라
top,left 이런 위치조건이 먹어지면서 올라갑니다
zindex 로 순서도 조절할수있고여
이미지를 배경으로 사용하세요.
답변을 작성하시기 전에 로그인 해주세요.
