CSS - 与祖父设置相对位置！元件

Question

我有这样的布局：

<div class='one'>
   <div class='two'>
       <div class='three'>some text</div>
   </div>
</div>

可以根据css中的祖父元素（one）设置三个相对位置吗？

看看这个： http://jsfiddle.net/chalist/H48Je/

Answer 1

当一个元素有position: relative并且你移动它（比如left: 20px）时，它会相对于页面流中的自然位置移动，留下之前的空隙（没有其他的）元素将抓住，因为它）。所以在某种程度上，简单的答案是肯定的：如果你给.three一个相对位置并移动它，它将相对于它的所有祖先移动。

但是，一般情况下，如果要移动与祖先相关的元素，通常会给祖先position: relative和要移动的元素position: absolute。然后任何定位（例如top: 20px）将与定位的祖先相关，并且被移动的元素将不会留下间隙。

需要注意的一点是，这种定位与最近的祖先相关。因此，如果.two有定位，您将无法将.three与.one相关联......（不是直接，无论如何）。

顺便说一句，如果一个元素设置为position: absolute并且没有祖先有任何定位集，那么绝对元素上设置的任何坐标都将与视口相关。