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

我有一个这样的布局：

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

一些文本

是否可以根据CSS中的元素（

one

）设置三个元素的相对位置

看看这个：

---

当一个元素有

位置：relative

并且你移动它（比如

left:20px

）时，它相对于它在页面流中的自然位置移动，在它之前的位置留下一个间隙（没有其他元素会抓住它）。所以在某种程度上，简单的答案是肯定的：如果你给

.three

一个相对位置并移动它，它将相对于它的所有祖先移动

但是，一般来说，如果要相对于祖先移动元素，通常需要给祖先

位置：relative

和正在移动的元素

位置：absolute

。然后，任何定位（例如，

top:20px

）都将与定位的祖先相关，并且移动的元素不会留下间隙

需要注意的一点是，此定位将与最近的定位祖先相关。因此，如果

.two

已定位，您将无法定位

.two

相对于

的位置。。。（无论如何，不是直接的）

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