如何设置与爷爷的相对位置！元素？

Question

我有这样的布局：

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

是否可以根据oneCSS 中的祖父元素 ( )设置三个的相对位置？

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

Answer 1

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

但是，一般来说，如果您想移动与祖先相关position: relative的元素，通常会提供祖先和正在移动的元素position: absolute。然后任何定位（例如top: 20px）都将与定位的祖先相关，并且被移动的元素不会留下间隙。

需要注意的一件事是，此定位将与最近定位的祖先相关。因此，如果.two有定位，您将无法.three相对于.one...定位（无论如何都不能直接定位）。

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