我在Google Chrome中遇到相对定位问题
以下代码在IE中运行良好,但在Chrome中运行不正常.
相对定位相对于元素的正常位置.
红框的正常位置在黑匣子的正下方.
如果我添加10％的空间,红色框应该在正常位置下出现10％.
以下代码在IE中运行良好,但在Chrome中运行不正常.
相对定位相对于元素的正常位置.
红框的正常位置在黑匣子的正下方.
如果我添加10％的空间,红色框应该在正常位置下出现10％.
HTML
<body>
<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</body
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;
}
解决方法
要使相对定位起作用,父级应具有以下大小：
width: 100%; height: 100%;
