Html DIV 在浏览器中放大和缩小时移动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11331997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
DIV moves when zoom in and zoom out in browser
提问by patel.milanb
I have a following div structure
我有以下 div 结构
<div id="wrapper">
<div id="header">
<div id="storeFinder">
/* html goes here */
</div>
</div>
</div>
now when i zoom in or out from the browser, "storeFinder"moves right / left ...
现在，当我从浏览器放大或缩小时，"storeFinder"向右/向左移动...
I have searched online and found that need a wrapper around the "storeFinder"so that it does not move with the <body>and specifying the min-widthalso can solve the problem.
我在网上搜索过，发现需要一个包装器，"storeFinder"这样它就不会随着 移动<body>并指定min-width也可以解决问题。
in my case, i already have a wrapperdiv and specifying the min-widthalso dint help me.
就我而言，我已经有一个wrapperdiv 并指定了min-widthdint 帮助我。
looking for help here very badly.
在这里寻求帮助非常糟糕。
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storefinderdropdown {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
采纳答案by xan
Your correct CSS code Working Jsfiddle here
您正确的 CSS 代码在此处使用 Jsfiddle
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storeFinder {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0px;
left:342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
回答by Jason Ellis
Try putting a position: relativeon the parent. That will confine the children's positions to be absolute according to the parent and not according to the document. This article gives more details and examples: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
尝试将 aposition: relative放在父级上。这将根据父级而不是根据文档将子级的位置限制为绝对。本文提供了更多细节和示例：http: //css-tricks.com/absolute-positioning-inside-relative-positioning/
回答by SVS
Try this:
尝试这个：
#storefinderdropdown {
position: absolute;
top: 8px;
left: 342px; /*Add This*/
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0; /* Change This*/
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}?
May be this will be helpful for you.
可能这对你有帮助。
