CSS - 父元素的定位是绝对定位，子元素的定位是相对定位，反之亦然。

Question

CSS - 父元素的定位是绝对定位，子元素的定位是相对定位，反之亦然。

csscss-position

14

我有一个

包含另一个

。当父级是position:relative且子级是position:absolute时，我理解这种情况。但我不理解以下情况的发生：

父级为绝对定位，子级为相对定位
父级和子级都是绝对定位
父级和子级都是相对定位

我使用JSbin中来自为什么基于父元素右边界的绝对定位元素会换行？的示例，但该问题适用于定位概念总体上。

- user3687001

第一点和第三点不是相同的吗？ - Terry

1

你不理解发生了什么？ - web-tiki

@Terry：是的，＃2与OP理解的情况相同——定位考虑最近的非静态父级。 - Ulrich Schwarz

2个回答

4

如果父元素是相对定位，子元素是绝对定位：父元素会像保护自己的孩子一样倾听他的需求。
如果两者都是绝对定位：它们彼此之间没有任何关系，就好像是陌生人一样。
如果父元素是绝对定位，子元素是相对定位：它们是绑定在一起的，孩子的位置（宽度和高度）会相对于父元素进行移动。

这总会有点奇怪，关于这个问题有很多优秀的文章，但对我来说，只需要在相对定位和绝对定位之间不断切换，直到达到预期效果。希望这能够解决你的疑惑。

- Bas Schreuder

3

嗨，巴斯，希望你能帮我让我的孩子们听话。他们拒绝被父母约束。让我概述一下他们的背景：他们是有色人种的孩子，而且都在包装中。我想我需要为他们设置一些边距，因为目前他们根本没有任何边框。也许他们只需要一些样式？目前他们没有什么动画效果，并且在转换方面遇到了困难。他们的祖先都没有这些问题。我只需要更加灵活吗？ - Michael Zaporozhets

只需给我链接，我会尽力帮助您。 - Bas Schreuder

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Barry T. Smith · Accepted Answer

点击此处了解有关绝对、相对和固定定位的更多信息，但我将尝试特别回答您关于关系的问题。

position: absolute会将该元素定位到其最近的具有非static位置的父元素。 static是所有元素的默认值。

position: relative有点奇怪，因为它实际上影响的是该元素的子代而不是自己的位置。它只是告诉它的子元素：“如果你的position是absolute，那么相对于我本身来定位自己。” fixed或absolute的position也会产生相同的效果（意味着定位的子元素将相对于它的边界进行定位），但这些样式也会影响它们自己在页面上的位置。具有position: relative的元素看起来不会有任何不同，但它的子元素可能会。

因此，请考虑以下情况：

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

如果grandchild有position: absolute属性，它将相对于浏览器窗口定位自己，因为没有父元素具有除默认值static之外的position属性。

如果parent也具有position属性的值为relative、absolute或fixed，grandchild会相对于parent的边界进行定位。

但是，如果child也具有position属性的值为relative、absolute或fixed，grandchild将相对于child的边界进行定位，因为它是具有除static之外position属性的最近的父元素。

总之，relative影响一个元素的子级，而absolute和fixed则影响元素本身以及其子级。

请记住，position: fixed将绕过所有relative和absolute父元素，并始终相对于浏览器窗口定位自身。