html - 如何设置与祖父的相对位置！元素？

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并且没有祖先有任何定位设置，那么绝对元素上设置的任何坐标都将与视口相关。