top 버튼 겹침 현상
본문
top 버튼 위에 카톡을 달려고 합니다.
아래 사진처럼 자꾸 겹쳐서 나옵니다. 답답하네요.
고수님들 좀 도와주세요.
<a href="https://pf.kakao.com/_BxlvGs" target="_blank" id="ft_to_top"><img src="https://heralady.cafe24.com/theme/kiwi/img/kakao.png"></a><span class="qk_tit"></span>
<a href="#" id="ft_to_top"><i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span></a>
답변 4
1.
<a href="https://pf.kakao.com/_BxlvGs" target="_blank" id="ft_to_top"><img src="https://heralady.cafe24.com/theme/kiwi/img/kakao.png"></a><span class="qk_tit"></span>
에서 id="ft_to_top" 를 id="ft_to_top2" 로 변경합니다.
2. 테마라면 아마도 테마 /css/mobile_shop.css 파일에서
#ft_to_top { 를 찾습니다.
3. ft_to_top해당 줄을 복사해서 바로 바로 밑에 붙혀넣기를 하고 ft_to_top2로 변경 합니다.
4. ft_to_top2에서 bottom 값을 더 높게 변경 합니다. 만약 ft_to_top 이 80점도하면 30정도 높혀서 110정도
(여기서 중요한건 position:fixed 와 right, bottom 값이고 나머지는 박스에 대한 스타일이니 그건 삭제하시거나 변경하시면 됩니다.)
5. extend/version.extend.php 에서 define('G5_CSS_VER', '210618'); 뒤에 210618 숫자를 아무거나로 변경.
(이 버전 숫자는 변경한 날짜 쓰셔도 되시고 아니면 https://sir.kr/g5_plugin/10198 이 플러그인 쓰면 css나 js 바꿀때마다 변경 안하셔도 됩니다.-5.4.3 이상만 가능)
감사합니다. 완벽하게 구현되었습니다.
짱이십니다!!!
겹치는 이유는 id="ft_to_top" 부분이 같기 때문입니다.
다르게 바꾼 후, 스타일 정의된 부분도 복사해서 그에 맞게 변경 후, bottom값을 조정해 보세요.
css 를 그대로 쓰실려고 한거 같은데 다른 아이디로 하나 만드셔서 css 위치 값을 조절하시면 될거 같습니다. 아니면 카톡 부분을 탑 버튼 소스쪽에 넣으시거나요.
클래서값 중복하는거와 요소검사로 위치 지정해보세요 확인가능할겁니다