css - 搜索栏的定位

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

You can do:

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

Answer 2

我建议实际上将它放在你想要放置的 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;
}