定位绝对定位元素的相对子元素

Question

position: relative的孩子应如何在拥有position: absolute的父母内部行事？

例如（JSFiddle）：

<div style="position:relative; float:left; min-width:900px; max-width: 1400px; height:100%;">
  <div style="position:absolute; top:0; right:0; width:200px; height:300px;">
    <div style="position:relative; top:0; left:0; width:500px; height:100%;"></div>
  </div>
</div>

当我将浏览器窗口缩小到最大宽度以下时，内部div移动到其父元素之外。这是正常的行为吗？

Answer 1

取自：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

  

相对 [...] 它的真正含义是“相对于自身”。如果您在某个元素上设置position: relative;但没有其他定位属性（顶部，左侧，底部或右侧），那么它的定位将无效，如果你把它当作位置那就完全一样：静态;但是如果你给它一些其他的定位属性，比如top: 10px;，它会将它的位置从 NORMALLY 的位置向下移10个像素。 [...]

Answer 2

尝试改变一些事情。首先，给你的第一个div实际高度而不是100％。其次，尝试使子元素适合其父元素。现在它是200px div内的500px div。对于此特定任务，它可能更好地定位在父级之外。