스클롤 위치에 따라 다라다니기 어떻게하면 될까요!? 부탁드립니다.
본문
상담신청 하단에 있는 바가 스크룰 위치에 따라 하단에 계속해서 따라다니게 하고 싶습니다.
알아봐도 잘 안되네요. 꼭즘 작동될 수 있도록 부탁드립니다.
tail.php
↓이부분을 어떻게하면 되나요?
<div class="footer_counsel clearfix">
<div class="inner">
<h2><img src="<?=G5_THEME_URL?>/img/q_counsel_tit.png" alt=""></h2>
<div class="box">
<form id="footer_counsel_form" name="footer_counsel_form" action="<?=G5_THEME_URL?>/tl_counsel/apply_x.php" method="post">
<input type="hidden" name="ci_id" value="3">
<fieldset>
<legend class="sr_only">빠른상담</legend>
<div class="box1">
<p class="frow">
<label for="co_name">이름</label>
<input type="text" name="co_name" id="co_name" class="form_txt">
</p>
<div class="frow">
<input type="hidden" id="co_hp" name="co_hp" />
<label for="co_hp2">전화번호</label>
<div class="tel_box">
<select id="co_hp1" maxlength="4" class="phone" groupname="txtNum" requird="">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
<input type="text" id="co_hp2" maxlength="4" class="phone" groupname="txtNum" requird="">
<input type="text" id="co_hp3" maxlength="4" class="phone" groupname="txtNum" requird="">
</div>
</div>
</div>
<div class="box2">
<p class="frow">
<label for="co_text_1">내용</label>
<textarea id="co_text_1" required="" name="co_text_1"></textarea>
</p>
</div>
<div class="box3">
<div class="privacy">
<input type="checkbox" name="counsel_agree" id="counsel_agree" value="yes" class="checkbox" checked="">
개인정보 취급방침 동의 </div>
<input type="submit" value="신청하기" class="btn_submit">
</div>
</fieldset>
</form>
</div>
</div>
</div>
<CSS 코드>
.footer_counsel {padding:42px 0; background:#f7d654;}
.footer_counsel h2 {float:left; width:188px;}
.footer_counsel label {width:90px; display:inline-block; font-size:22px; color:#000000; line-height:46px;}
.footer_counsel input[type="text"], .footer_counsel select { height:50px; padding:0 10px; font-size:22px; color:#1e353c; border:0; width:100% }
.footer_counsel .box { margin-bottom:-10px; vertical-align:top;}
.footer_counsel .box1 {float:left; width:40%; padding:0 32px;}
.footer_counsel .box1 label {width:90px;}
.footer_counsel .tel_box { width:100%; overflow:hidden; display:inline-block; vertical-align:middle;}
.footer_counsel .tel_box input[type="text"], .footer_counsel .tel_box select {float:left; width:32%; }
.footer_counsel .tel_box input[type="text"] {margin-left:2%;}
.footer_counsel .box2 {float:left; width:34%;}
.footer_counsel .box2 label {width:50px; vertical-align:top;}
.footer_counsel .box2 textarea {width:100%; height:110px; padding:5px 10px; border:0; font-weight:300; font-size:22px; color:#000;}
.footer_counsel .box3 {float:right; width:20%; position:relative}
.footer_counsel .frow {margin-bottom:10px; position:relative; padding-left:100px;}
.footer_counsel .frow label {position:absolute; left:0;}
.footer_counsel .frow2 { margin-bottom:10px; position:relative; padding-left:80px}
.footer_counsel .btn_submit {width:100%; margin-top:36px; font-size:24px; color:#ffffff; line-height:50px; background:#3264c7;}
.footer_counsel .checkbox { width: 18px; height: 18px; vertical-align: middle; border: 5px solid #3a3a3a; background-color: transparent;}
.footer_counsel .privacy{position:absolute;top:0;color:#000;font-size:16px;letter-spacing:-.5px; text-align:left}
@media screen and (max-width:1080px) {
.footer_counsel h2 { width:100%; float:none}
.footer_counsel .box1 { width:100%;}
.footer_counsel .box2 { width:100%; padding:0 32px}
.footer_counsel .box3 { width:100%; padding:0 32px}
}
답변 2
.footer_counsel{
position : fixed;
(top,bottom,left,right) : 원하는 값 px
}
.footer_counsel{
position : fixed;
(top,bottom,left,right) : 원하는 값 px
}
넣어봤는데 div 따라 다니는게 아니고 삭제되어 버리네요? ㅠ
왜 그럴까요?
<사이트>