div的位置在jQuery.show（）之后;

Question

在使用jQuery的.show（）后，我试图让div显示在正确的位置。

在下图中，您可以看到搜索div（自动完成div）显示在最左侧，但我希望它显示在我绘制红色框的位置。

基本上我的网站中心有一个小标题，宽度为1000像素，当自动完成div显示时，我希望它排在正确的位置，但我不确定如何设置边距或锚点让它在正确的位置。

这是我的JS：

    $('#sbar').focus(function(){
        $('#acd').show();
    });

以下是自动完成DIV的CSS：

.autoCompleteDiv{
    width: 428px;
    height: 150px;
    position: fixed;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0px 4px 4px;
    z-index: 999;
    top: 66px;
    padding: 10px;
    font-size: small;
    color: gray;
    margin-left: auto;
    margin-right: auto;
    overflow-y: scroll;
    display: none;
    opacity: 0.93;

基本上我想将div移动到红点，但是它在屏幕尺寸之间兼容，并且当窗口被“加窗”时它保持排列。

关于如何做到这一点的任何想法？

此致

Answer 1

如果您使用搜索div作为自动完成div的容器，那么它应显示在 地点。我创建了一个quick demo来说明这一点。

html看起来像这样：

<div id="search"><input value="search" type="text"/>
    <div id="auto"><p>autocomplete</p></div>
</div>

和css：

#search{position:fixed;top:20px;left:200px;}
#auto{display:none;width:auto;min-height:100px;}

要使其响应，只需使用媒体查询来更新搜索框的位置......

希望有所帮助...

Answer 2

想出来。

制作一个1000px容器div：

#acdContainer {
    width: 1000px;
    height: 150px;
    top: 64px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

并将我的自动完成div更改为：

.autoCompleteDiv{
    width: 730px;
    margin-left: 250px;
    margin-top: 2px;
    height: 150px;
    position: relative;
    background-color: white;
    border-radius: 3px;
    box-shadow: 0px 4px 4px;
    z-index: 999;
    padding: 10px;
    font-family: Raleway;
    font-size: small;
    color: gray;
    overflow-y: scroll;
    display: none;
}

因此自动完成div看到自己位于一个始终居中的1000px窗口中。