CSS - Установите относительное положение с дедушкой! Элемент

Question

У меня есть макет, как это:

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

можно установить относительное положение в течение трех в соответствии с маятником элемента (one) в CSS?

Посмотрите это: http://jsfiddle.net/chalist/H48Je/

Answer 1

Когда элемент имеет position: relative и вы переместите его (скажем left: 20px) движется по отношению к своему естественному положению в потоке страницы, оставляя зазор, где он был до (который ни один другой элемент не схватится, как бы). Таким образом, простой ответ - да: если вы дадите .three относительное положение и переместите его, он будет двигаться по отношению ко всем его предкам.

Как правило, если вы хотите переместить элемент по отношению к предку, вы обычно дадите предку position: relative и перемещаемый элемент position: absolute. Тогда любое позиционирование (например, top: 20px) будет относиться к позиционированному предку, и перемещаемый элемент не оставляет отставания позади.

Следует отметить, что это позиционирование будет связано с ближайшим позиционированным предком. Поэтому, если .two имеет позиционирование, вы не сможете позиционировать .three относительно .one ... (не напрямую, так или иначе).

BTW, если элемент установлен в position: absolute, и ни один из предков не имеет никакого позиционирующего набора, любые координаты, установленные на абсолютном элементе, будут относиться к окну просмотра.