Позиционирование строки поиска

Question

Я вставил панель поиска, используя точки ввода кода веб-сайтов и теперь пытаюсь установить ее ниже строки моего сайта. Ниже на скриншоте о том, чего я пытаюсь выполнить.

Мой сайт www.jobspark.ca

<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#banner-area").prepend("<div id='banner-tagline'>Your British Columbia and Alberta Job Search</div>"); 
}); 
</script> 
<div class="positionedSearch"></div> 

Текущий CSS для панели поиска включает

.positionedSearch { 
width: 400px; 
height: 45px; 
} 

Answer 1

Я предлагаю на самом деле положить его в HTML, где вы хотите его в отличие от позиционирования его из другого места ...

Вы можете использовать:

.positionedSearch { 
    width: 400px; 
    height: 45px; 
    position: absolute; 
    z-index: 2; 
    left: 40%; 
    top: 330px; 
} 

Это работает только для полноэкранного мультимедийного запроса. Нужно настроить на меньшие экраны.

Как я уже сказал, было бы намного лучше разместить его в этой относительной области через JS .. тогда вы можете избежать использования абсолютного позиционирования.

на основе другого вопроса:

Найти эту строку в CSS и изменить его к этому:

.sqs-search-ui-button-wrapper { 
    background: rgba(255, 255, 255, 0.66); 
    max-width: 280px; 
} 

Answer 2

Вы можете сделать:

.positionedSearch { 
    width: 400px; 
    height: 45px; 
    position: absolute; 
    top: 350px; 
    left: 50%; 
    margin-left: -200px; 
    z-index: 2; 
}