javascript - div 在 jQuery.show() 之后的位置；

Question

在使用 jQuery 的 .show() 之后，我试图让一个 div 显示在正确的位置。

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

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

这是我的 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;}

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

希望对你有帮助...