css相对定位在chrome中不起作用答案

【问题标题】：css relative positioning not working in chromecss相对定位在chrome中不起作用
【发布时间】：2016-10-08 23:43:20
【问题描述】：

我在 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 - 和height，因此您可以使用% 中的宽度。 解决方案 1) - 给父元素一个宽度和高度。 解决方案 2) - 给红框一个 margin-top:__px
你到底是什么样子的？因为在我看来还可以jsfiddle.net/WrKk9
在 Firefox 中运行时真的很烦人 = =
@man 这是因为在 op 的情况下，维度是通过指定顶部和底部来指定的。如果它是只有顶部和自动高度的普通父级，则会出现问题。

标签： html css positioning

【解决方案1】：

为了使相对定位起作用，父级应该有一个大小：

width: 100%;
height: 100%;

check the result in this fiddle

【讨论】：

谢谢，很好用。但仍然存在这样一个事实，即 chrome 是唯一需要容器的宽度和高度值才能进行相对定位的浏览器。我理解 top,bottom,.. 是相对于父元素（绝对）或正常位置（相对）边缘的偏移值，而不是指父元素的高度或 with。

【解决方案2】：

好的，我现在才意识到，这是什么问题：

top 值的 % 总是指父元素的高度。由于您没有设置高度，因此它为零；如果你在父元素上设置一个高度，一切都会如你所愿......

看到这个jsfiddle，我刚刚添加了

height: 60%

到父 css。

【讨论】：

问题在于，当您添加宽度和/或高度值时，它可以在 Chrome 中使用。但是当您使用绝对定位的顶部、底部、右侧和左侧值时，会指定宽度和高度值。我的数学是错误的，你的百分比值是相互矛盾的。除此之外，如果我在外部容器中指定宽度和高度以及左值，则全部以 % 值表示。我在 IE 和 Chrome 中的黑色和红色框之间有一个空格，但蓝色框的尺寸不同。