CSS-父母的位置是绝对的，孩子的位置是相对的，反之亦然 [英] css - parent's position is absolute and child's position is relative and vice versa

问题描述

我有一个div托管另一个div.好吧，我得到了当父母是position:relative并且 孩子是position:absolute.

I have div which hosts another div. Ok, I get the case when the parent is position:relative and the child is position:absolute. I don't get what happens when

1. 父母的位置是绝对的，孩子的位置是相对的
2. 父母的立场是绝对的，孩子的立场是绝对的
3. 父母的位置是相对的，孩子的位置是相对的

我使用 JSbin 示例questions/24307922/为什么要在其父母双方的正确位置上放置绝对位置元素包裹?为什么绝对位置元素会基于其父对象的正确边界来包装?该问题通常适用于定位概念

I use the JSbin example from Why does an absolute position element wrap based on its parent's right bound? but the question applies to positioning concept in general

推荐答案

Read more about absolute, relative, and fixed position and how they differ here, but I'll try to answer your question about relationships specifically.

position: absolute会将元素定位为最近的父元素，并使用position以外的position .静态是所有设置的默认设置.

position: absolute will position that element to it's nearest parent with a position other than static. Static is the default for everything.

position: relative有点奇怪，因为它确实影响该元素的子元素，而不是它自己的位置.只是对它的子元素说，如果您有position: absolute，请相对于我摆放自己的位置". fixed或absolute的position做同样的事情(意味着其定位的子代将相对于其边界定位自己)，但是这些样式也会影响其在页面上的位置. position: relative的元素看起来没有什么不同，但是可能是子元素.

position: relative is a little weird because it really affects that element's children, not it's own position. It's just saying to it's child elements, "position yourself relative to me if you have position: absolute." A position of fixed or absolute does the same thing (meaning its positioned children will position themselves relative to its boundaries), but these styles also affect their own position on the page. An element with position: relative won't look any different, but it's children might.

因此，请考虑以下情况:

So consider a situation like this:

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

如果grandchild具有position: absolute，则它将相对于浏览器窗口定位，因为没有父级具有position，而不是默认的static.

If grandchild has position: absolute, it will position itself relative to the browser window because there is no parent with a position other than the default of static.

如果parent也具有relative，absolute或fixed的position，则grandchild将相对于parent的边界定位自身.

If parent also has position of relative, absolute, or fixed, grandchild will position itself relative to the boundaries of parent.

但是，如果child的position也为relative，absolute或fixed，则grandchild将相对于child的边界进行定位，因为它是最近的position而不是static的父级.

However, if child also has a position of relative, absolute, or fixed, the grandchild will position itself relative to child's boundaries, because it is the nearest parent with a position other than static.

总而言之，relative影响元素的子元素，而absolute和fixed影响元素本身及其子元素.

In summary, relative affects an element's children, while absolute and fixed affect the element itself as well as its children.

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

And remember that position: fixed bypasses all relative and absolute parents and always positions itself relative to the browser window.

这篇关于CSS-父母的位置是绝对的，孩子的位置是相对的，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！