Html css 相对定位在 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20702307/
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
css relative positioning not working in chrome
提问by user3120396
I have a problem with relative positioning in Google Chrome The following code works fine in IE but not in Chrome. Relative positioning is relative to the normal position of an element. The normal postion of the red box is right under the black box. If I add a 10% space the red box should appear 10% under the normal position.
我在 Google Chrome 中的相对定位有问题 以下代码在 IE 中工作正常，但在 Chrome 中无效。相对定位是相对于元素的正常位置。红框的正常位置在黑框的正下方。如果我添加 10% 的空间，红色框应该在正常位置下方出现 10%。
Html
html
<body>
<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</body
Css
css
#outer
{
position:absolute;
left:20%;
right:20%;
bottom:20%;
top:20%;
background-color:Blue;
}
#inner1
{
position:relative;
width:20%;
height:20%;
background-color:Black;
}
#inner2
{
position:relative;
top:10%;
width:20%;
height:20%;
background-color:Red;
}
回答by Wilt
For relative positioning to work the parent should have a size:
为了使相对定位工作，父级应该有一个大小：
width: 100%;
height: 100%;
回答by Kjell
Ok, just realized myself now, what the problem of this is:
好的，现在才意识到自己，这是什么问题：
- the % for the top value is always referring the height of the parent element. Since you didn't set a height it is zero; if you set a height on the parent element everything is working as you wished...
- 顶部值的 % 总是指父元素的高度。由于您没有设置高度，因此它为零；如果您在父元素上设置高度，一切都会如您所愿...
see this jsfiddle, i just added
看到这个jsfiddle，我刚刚添加
height: 60%
to the parent css.
到父 css。
