Javascript jQuery.show（）之后div的位置；

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

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

基本上，我的站点中心有一个小标题，宽度为1000px，当autocomplete div出现时，我希望它排列在正确的位置，但我不确定如何设置边距或锚，使其位于正确的位置

这是我的JS:

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

以下是autocomplete 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移到红点，但是要让它在屏幕大小之间兼容，并且在窗口被“窗口化”时保持对齐

有什么办法吗

---

如果您使用search div作为自动完成div的容器，那么它应该显示在 位置我创建了一个例子来说明这一点

html如下所示：

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

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

希望这有助于……

解决问题

制作了一个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;
}

---

因此，autocomplete div将自己视为处于一个始终居中的1000px窗口中。

您的位置：fixed将使其固定到浏览器窗口，该窗口默认为

left:0

，尝试删除位置：fixed，并使用位置：relative

show（）

将只显示元素：block，而且你的位置固定也需要一个左值……是的，我知道display:block由.show（）提供给它。我希望它在滚动时保持不变，所以position:relative不会这样做吗？我应该给我的位置留下什么样的值：固定？如果我给它500px，这不会随着窗户尺寸的变化而变化吗？也就是说，autocomplete div始终位于窗口左边缘的左边500px。位置：Relative在页眉和正文之间插入一个空格。“使用左值固定”会在调整窗口大小时更改其对齐方式。本质上，我的问题是如何定位此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;
}