html – css相对定位不适用于chrome

发布时间：2020-12-14 16:43:35 所属栏目：资源来源：网络整理

导读：我在Google Chrome中遇到相对定位问题以下代码在IE中运行良好,但在Chrome中运行不正常. 相对定位相对于元素的正常位置. 红框的正常位置在黑匣子的正下方. 如果我添加10％的空间,红色框应该在正常位置下出现10％. jsfiddle HTML body div id="outer" div id=

我在Google Chrome中遇到相对定位问题
以下代码在IE中运行良好,但在Chrome中运行不正常.
相对定位相对于元素的正常位置.
红框的正常位置在黑匣子的正下方.
如果我添加10％的空间,红色框应该在正常位置下出现10％.

jsfiddle

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%;

check the result in this fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!