为什么相对定位元素从窗口的上角开始？
为什么相对定位元素从窗口的上角开始？
提问于 2017-11-26 04:05:17
当父级或父级具有位置值时，我对此relative and absolute定位非常困惑。有人能帮我排除这两个案子吗？
案例1
- 祖父母-绝对
- 亲缘关系
- 儿童绝对
案例2:
- 祖父母-绝对
- 亲缘关系
- 儿童绝对
但在这里，父母是独立于祖父母的，如下所示：
<div class="grand-parent">
</div>
<div class="parent">
<div class="child">
</div>
</div>下面是我做过的小提琴：https://jsfiddle.net/4KUWc/32/
问题：
- 我看不出上述两种情况有什么区别。第二种情况，父母不应该在父母之后开始吗？为什么要取(0,0)
- 如果相对人的父母是绝对的，那么它会相应地对待绝对的父或不依赖于它。
- 我们能有一个父母是绝对父母的相对子女吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-11-26 04:08:33
position:absolute
...elements有它们的关系定位属性(即top、bottom、right、.)使用position static以外的值(默认情况下)从它们的最近的祖先计算。如果不存在这样的祖先，则将使用<body>。
position:fixed
...elements将它们的关系定位属性从它们的最近的视图中计算出来(默认情况下是：<body>，但是一个3d转换元素充当它的子元素的视口-参见用变换解固定元素)。
上述两种方法都将元素(包括其所有子元素)放置在父元素的内容流之外。DOM中的所有后续元素都将与此元素类似，其子元素不存在于DOM中。
position:relative
...elements根据计算它们的关系定位属性，如果不应用关系定位属性，它们通常在父级内容流中占据的位置。与fixed和absolute不同，relative place 不将元素从其父内容流中放置。
Stack Overflow用户
发布于 2017-11-26 05:01:10
简单地说，没有魔法发生。只需了解每个职位是如何工作的。以下是我能想到的最简短的总结：
- 默认情况下，所有元素都有
position: static，这意味着它们将相互叠加(如果它们是嵌套的，则在彼此内部)。 - 如果一个元素有
display: none，或者有width: 0px和height: 0px，那么它就不会占用空间，所以其他元素将被呈现为隐藏元素从未存在过。 - 如果元素位置是静态的(默认值)，则忽略CSS属性
top+bottom+right+left+z-index。要正确工作，元素必须是相对的、绝对的或固定的。 static和relative是相似的，只不过relative可以考虑属性top+bottom+right+left+z-index。relative相对于其父位置定位。absolute或fixed位置相同的元素有一个不同：absolute相对于body定位，而fixed相对定位window (注意@AndreiGheorghiu关于fixed位置和3D转换的答案)。absolute元素将相对于位置不是static的最近的父。如果它的所有父级都是静态的，则它将相对于body。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47495962
复制相关文章
相似问题
腾讯云开发者
