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

이미지 위에 고정적인 위치 잡기 문제입니다ㅠ 채택완료

mmkk2 6년 전 조회 5,995
답변 3
목록

 

a.jpg 라는 이미지가 있을경우,

 

<div id="price">15,000</div> 

 

라는 div를 pc상태이든,모바일상태이든 같은 위치에 넣고 싶습니다.

 

top,left를 px로 할경우 모바일에선 div가 다른위치로 가있고,

%로 할 경우엔  핸드폰마다 div 위치가 다 다르네요ㅠㅠ

 

pc든 모바일이든 같은 위치에 표시될 방법좀 알려주세요ㅠ

#이미지 #div #css #top #left
댓글을 작성하려면 로그인이 필요합니다.

답변 3개

채택된 답변
+20 포인트
아르키어드

그런데 이미지가 반응형이라면 width가 줄어들수록 계속 height도 줄어들텐데...

css에서 top,left, transform:translate() 3개를 퍼센테이지로 사용해보시기바랍니다..

예를들어 div가 이미지의 항상 가운데 있게 하고싶다 하시면

top:50%;left:50%;transform:translate(-50%,-50%) 등등,,

 

아니면 css에 flex모델도 괜찮은듯 싶습니다.

display:flex,

justify-content 대표적인 옵션으로 baseline,center,start,end

align-items 대표적인 옵션으로 baseline,center,start,end

 

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

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

내

css 적인 부분으로만 본다면 부모의 위치값(?)부터 틀로 짜는 방식

<div style="position:relative;">

    <div style="position:absolute;"></div>

 

 

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

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

태
태양별
6년 전

그냥 단순하게.. 이렇게 PC,모바일의 경우를 두고

css id값을 저렇게 서로 다르게주어 조절하시는게 편할듯합니다.

 

</p>

<p><?php if(G5_IS_MOBILE) { // 모바일의경우 ?></p>

<p><div id="price_m">15,000</div></p>

<p><?php } else { // PC인경우 ?>

<div id="price_pc">15,000</div></p>

<p><?php } ?></p>

<p>

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

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

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

로그인