絶対的だが親に相対的な位置

別のdiv内に2つのdivがあり、1つの子divを親divの右上に配置し、もう1つの子divをcssを使用して親divの下部に配置したいと思います。つまり、2つの子divで絶対配置を使用したいが、ページではなく親divに対して相対的に配置したい。これどうやってするの？

サンプルhtml：

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

この作品のためposition: absoluteの手段のようなもの「の使用をtop、right、bottom、left持っている最も近い祖先との関係の中で自分自身を配置しますposition: absoluteかposition: relative。」

私たちが作るので、#father持っているposition: relative、と子供たちが持っているposition: absolute、そして使用topしてbottom子を配置します。

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

誰かが子divを親の直下に配置したい場合

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

作業デモCodepen

親にポジションを与えない場合、デフォルトでがかかりますstatic。その違いを理解したい場合は、この例を参照してください

例1 ::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

ここでは、親クラスには位置がないため、要素は本文に従って配置されます。

例2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

この例では、親には相対位置があるため、要素は相対親の内部に絶対的に配置されます。