Question

当父母或祖父母有位置值时，我对这个relative and absolute定位很困惑。有人可以把这两个案件告诉我：

案例1 ：

案例2：

但是这里的父母独立于祖父母，如下所示：

<div class="grand-parent">

</div>

<div class="parent">
     <div class="child">

     </div> 
 </div>

以下是我工作过的小提琴： https://jsfiddle.net/4KUWc/32/

问题：

Answer 1

`position:absolute`

...元素具有关系定位属性（即top，bottom，right，...）从 <计算得出em>最近的祖先，position 以外的static值（默认值）。如果不存在这样的祖先，将使用<body>。

`position:fixed`

...元素的关系定位属性是根据 最近的视口 计算的（默认情况下为<body>，但是3d变换元素充当其子项的视口 - 请参阅Unfixing fixed elements with transforms）。

以上两者都将元素（包括其所有子元素）放置在其父元素的内容流之外。 DOM中的所有后续元素都将像此元素一样，其子元素不存在于DOM中。

如果没有应用关系定位属性，

...元素的关系定位属性是根据他们在父母内容流中通常占据的位置计算的。与fixed和absolute不同，relative位置不 将元素放置在其父内容流之外

Answer 2

简单地说，没有任何魔法发生。只需了解每个职位的运作方式。这是我能想到的最简短的总结：

所有元素默认情况下都有position: static，这意味着它们会相互堆叠（如果它们是嵌套的，则彼此叠加）。
如果某个元素包含display: none或width: 0px和height: 0px，那么它就不会占用空间，因此其他元素只会被渲染为隐藏元素永远不会存在。
如果元素位置是静态的（默认值），则忽略CSS属性top + bottom + right + left + z-index。要正常工作，元素必须相对，绝对或固定。
static和relative是相似的，只有relative可以考虑属性top + bottom + right + {{1} } + left。
z-index相对于其父级位置。
位置relative或absolute的元素相似，但有一点不同：fixed将相对于正文定位，而absolute将相对于窗口定位（注意@ AndreiGheorghiu关于fixed位置和3D变换的答案）。
fixed元素将相对于最近的父，其位置不是absolute。如果它的所有父母都是静态的，那么它将相对于 body 。