我在Google Chrome中的相对定位存在问题以下代码在IE中运行良好,但在Chrome中运行不正常.相对定位相对于元素的正常位置.红色框的正常位置在黑匣子的正下方.如果我添加10%的空间,红色框应该在正常位置下出现10%.
HTML
<body>
<div id="outer">
<div id="inner1">
</div>
<div id="inner2">
</div>
</div>
</body
Run Code Online (Sandbox Code Playgroud)
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;
}
Run Code Online (Sandbox Code Playgroud)