Добрый день. Не пойму как решить проблему. Есть header на ширину экрана с position: relative, а в нем есть элемент иконка скролла с position: absolute. После закрытия header идет блок с формой ввода данных ( все на фото ). Но он почему то отталкивается от иконки скрола. Если убираю position: absolute, то иконка пропадает и блок с формой ввода данных прилипает к Headerу. Как решить данную загвостку?
<header class="main-header" style='background-image: url(img/top_bg.jpg');>
<div class="header-info">
Много текста
</div>
<div class="mouse"> // Та самая иконка скролла
<span></span>
</div>
</header>
<div class="callback">
<div class="container">
<div class="row">
<div class="col-md-12">
<form class="call">
<div class="success"><span>Спасибо за заявку!</span></div>
<!-- Hidden Required Fields -->
<input type="hidden" name="project_name" value="***">
<input type="hidden" name="admin_email" value="***">
<input type="hidden" name="form_subject" value="Заявка">
<!-- END Hidden Required Fields -->
<input type="hidden" name="Страница" value="">
<input type="text" name="Имя" placeholder="Ваше имя..." required>
<input type="text" name="Телефон" placeholder="Ваш телефон..." required>
<select class="city" name="Город">
<option value disabled selected>Ваш город ...</option>
<option>...</option>
<option>...</option>
</select>
<select name="Тема обращения">
<option value disabled selected>Тема обращения ...</option>
<option>Записаться в сервис</option>
<option>Уточнить стоимость</option>
<option>Узнать подробнее об услуге</option>
</select>
<button class="button">Отправить</button>
</form>
</div>
</div>
</div>
</div>
.main-header
position: relative
min-height: 644px
.mouse
border: 2px solid #111111
border-radius: 13px
bottom: 76px
display: block
height: 46px
left: 50%
margin: 0 auto 0 -26px
position: absolute
width: 26px
.mouse span
animation-duration: 1s
animation-fill-mode: both
animation-iteration-count: infinite
animation-name: scroll
background: none repeat scroll 0 0 #111111
border: 1px solid transparent
border-radius: 4px
display: block
height: 4px
margin: 6px auto
width: 4px
@keyframes scroll
0%
opacity: 1
transform: translateY(0px)
100%
opacity: 0
transform: translateY(20px)
.callback
background-color: #111111
height: 56px
width: 100%
.call
position: relative
margin-top: 4px
.button
margin-top: 2px
padding: 7px 30px
padding: 8px 30px
position: absolute
right: 2%
margin: 0
top: 0px
outline: none
Простой
Простой