divの位置を絶対時刻と相対時刻として同時に指定する方法

Question

私はここで新しく、divの位置は絶対的で相対的なものとして同時に指定する方法を知りたい親は同時に。 ご協力ありがとうございました

Answer 1

子供が絶対的に配置されている場合は、任意の孫は再び絶対に子供との関係で配置することができます。

つまり、孫がの関係にあるためにはposition:relativeを絶対に配置する必要はありません。です。

だから、子供が孫の位置決めのための、それもフォーム基準点としてそれ自身の位置だけでなく、「相対」のposition:absoluteを持つようにと考えられます。

<div class="parent"> 
    <div class="child"> 
    <div class="g-child"></div> 
    </div> 
</div> 

.parent { 
    width: 350px; 
    height: 350px; 
    background: rebeccapurple; 
    margin: 1em auto; 
position: relative; 
} 

.child { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
    right: 50px; 
    top: 50px; 
    background: orange; 
} 

.g-child { 
    position: absolute; 
    width: 25px; 
    height: 25px; 
    background: #f00; 
    top:125%; 
    right: 0; 
} 

Codepen demo

Answer 2

HTMLブロックを配置する方法はいくつかあります。 fixedのように配置すると、他のブロックは無視され、ブラウザウィンドウにその位置が表示されます。 staticのように配置した場合（または配置しない場合は、デフォルトのため）、ページのフローに沿って移動します。 relativeのように配置すると、ページのフローに従って「通常」の場所から移動しています。 あなたはabsoluteとしてそれを配置した場合は、それがfixedまたはrelativeある最も近い祖先...明らかに

に比べ、何が同時にabsoluteとrelativeになることはできません位置決めしています。要素が別の祖先の位置に基づいて、またはページフローに基づいて配置されるようにします。私はそれが両方の方法であることが分かりません。