我正在为我的网站制作一个标题。我在标题中有一个搜索框,搜索结果应该显示在它的正下方。我调整了搜索结果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的相对位置。请帮助
用这个替换你的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;
}