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並且沒有祖先有任何定位集，那麼在絕對元素上設置的任何座標都將與該視口有關。