右、左と位置の相対祖先問題

Question

は、あなたがこのような何かを持っているとしましょう位置揃いの祖先 - div 3番目divを最初または2番目に相対的にする方法はありますか？もしそうなら、どうしたらいいですか？

Answer 1

私の理解から、あなたは絶対にdiv要素内のdivを配置したいのですが、私はあなたの両方absolute & relative内のすべてのrelativeのdivを表示してみましょう。

相対親、絶対的な子供。

親をposition:relativeと子供position:absoluteにするだけです。たとえば ：またはあなただけのものならば、すべての相対

#first { 
 
    position: relative; 
 
    background-color:#C555CC; 
 
    width:500px; 
 
} 
 
#second { 
 
    position:absolute; 
 
    background-color:#CCC555; 
 
    right:0; 
 
    width:400px; 
 
} 
 
#third{ 
 
    background-color:#C555CC; 
 
    width:300px; 
 
    height:300px; 
 
    } 
 

 
#zeone{ 
 
    position:absolute; 
 
    width:200px; 
 
    right:0; 
 
    height:200px; 
 
    background-color:#FFF; 
 
    }

<div id="first">First 
 
    <div id="second">Second<br /> 
 
    This is absolute positioned. 
 
    <div id="third">Third 
 
     <div id="zeone">Inner-most<br />This is absolute positioned.</div> 
 
    </div> 
 
    </div> 
 
</div>

、

相対親、相対的な子。

div { 
 
    width: 500px; 
 
} 
 
#first { 
 
    left: 0px; 
 
    right: 0px; 
 
    border: 3px solid #755D21; 
 
} 
 
#second { 
 
    position: relative; 
 
    left: 50px; 
 
    border: 3px solid #73AD21; 
 
} 
 
#third { 
 
    position: relative; 
 
    right: 50px; 
 
    border: 3px solid #000; 
 
} 
 
#zeone { 
 
    left: 50px; 
 
    position: relative; 
 
    border: 3px solid #0000FF; 
 
}

<div id="first">First 
 
    <div id="second">Second 
 
    <br />This is absolute positioned. 
 
    <div id="third">Third 
 
     <div id="zeone">Inner-most 
 
     <br />This is absolute positioned.</div> 
 
    </div> 
 
    </div> 
 
</div>