css - CSS：改变分辨率的位置变化

Question

我正在为我的网站制作标题。我在标题中有一个搜索框，搜索结果应该出现在它的正下方。我调整了搜索结果 div 的位置，但是当我更改屏幕分辨率时，div 移开了。我在html中有以下代码：

<div id = "header">
    <div id = "header_wrapper">
        <div id = "search_results">

        </div>
    </div>
</div>

在 CSS 中：

*{
    margin:0px;
}
#header{
    width:100%;
    border:1px solid #f1f1f1;   
    height:100px;
}
#header_wrapper{
    width:1000px;
    margin:auto;
    border:1px solid #f1f1f1;
    height:100px;
}
#search_results{
    position:absolute;
    left:30%;
    height:100px;
    width:500px;
    border:1px solid #f1f1f1;
    top:100px;
}

如何调整 div，使其在更改屏幕分辨率时不会改变其与父 div 的相对位置。请帮助

Answer 1

只需用这个替换你的css，我希望它会如你所愿。

 *{
    margin:0px;
}
#header{
    width:100%;
    height:100px;
}
#header_wrapper{
    width:1000px;
    margin:auto;
    border:1px solid #000;
    height:100px;
    position:relative;
}
#search_results{
    position:absolute;
    left:25%;
    height:100px;
    width:500px;
    border:1px solid #000;
    top:80px;
}