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

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