Question

我在Google Chrome中遇到相对定位问题以下代码在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; 
   }

Answer 1

要使相对定位起作用，父母应该有一个大小：

width: 100%;
height: 100%;

check the result in this fiddle

Answer 2

好的，现在才意识到自己，问题是：

最高值的％始终是指父元素的高度。因为你没有设置高度它是零;如果你在父元素上设置一个高度，一切都按你的意愿工作......

请参阅此jsfiddle，我刚刚添加了

height: 60%

到父css。

css相对定位不适用于chrome

2 个答案: