当父级或祖父级具有位置值时，我对这种相对和绝对 定位感到很困惑。有人可以帮我解决这两种情况吗:
案例 1:
- 祖 parent - 绝对
- parent -亲戚
- child - 绝对
案例二:
- 祖 parent - 绝对
- parent -亲戚
- child - 绝对
但是这里的 parent 是独立于祖 parent 的，如下所示:
<div class="grand-parent">
</div>
<div class="parent">
<div class="child">
</div>
</div>
下面是我研究过的 fiddle : https://jsfiddle.net/4KUWc/32/
问题:
- 我看不出上述两种情况有什么区别。应该 案例 2，父级 div 不是在祖父级之后启动？为什么需要 (0,0)
- 如果 relative 有一个 absolute 的 parent，它的行为是否相应 绝对 parent 或不依赖于它。
- 我们可以有一个以绝对为 parent 的亲戚 child 吗？
最佳答案
position:absolute
...元素有它们的关系定位属性(即 top 、bottom 、right ,...)根据它们的最接近的祖先计算position static 以外的值(默认)。如果不存在这样的祖先，<body>将被使用。
position:fixed
...元素的关系定位属性是根据它们的最近视口(viewport)计算的(默认情况下:<body>，但 3d 转换元素充当其子元素的视口(viewport) - 请参阅 Unfixing fixed elements with transforms)。
以上两种方式都将元素(包括其所有子元素)放置在其父元素的内容流之外。 DOM 中的所有后续元素都将像该元素一样工作，并且它的子元素不存在于 DOM 中。
position:relative
...如果没有应用关系定位属性，元素的关系定位属性是根据它们在父内容流中通常占据的位置计算的。不像fixed和 absolute , relative位置不会将元素置于其父内容流之外。
关于html - 为什么相对定位元素从窗口的顶 Angular 开始？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47495962/