ポジション内絶対位置

Question

#app,#main-sectionは#appの中にあり、#magazine-detailは#main-sectionの中にあります。 #appがposition：relativeに設定されている場合、#magazine-sectionの内部に#magazine-detailを配置する方法を教えてください。 #magazine-detailがposition：absolute;に設定されている

これは、CSSです：

#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
} 

#main-section { 
    position: absolute; 
    top: 77px; 
    left: 0; 
    width: 100%; 
} 

全体のhtmlをので、私はちょうど短いバージョンを掲載しています大きすぎる、あなたが画像を取得することを願っています：

<div id="app"> 

    ... 
    <div id="main-section"> 
     ... 
     <div id="main-section"> 
     ... 
     </div> 
    </div> 

</div> 

Iからを配置する必要がありますmain sectionの下部 私は位置でそれを配置しようとしている：それはやることが示唆されたように、このように、絶対：

#magazine-detail { 
    position: absolute; 
    bottom: 30px; 
} 

しかし、その後の要素が何とかトップではなく、下から30pxの位置でしたか？

Answer 1

私は以下の推測ではあなたの#appは相対的であるとmain-sectionがappに関して絶対的である

<div id="app"> 
    <div id="main-section"> 
     <div id="magazine-detail"></div> 
    </div> 
</div> 

youtはhtmlです。問題は、あなたがmagazine-detailも絶対に設定すると、それはmain-sectionに関して位置決めされるということです。

以下

は、作業サンプルです：

#app { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 200px; 
 
    padding: 5px; 
 
    border: 2px solid red; 
 
} 
 
#main-section { 
 
    position: absolute; 
 
    height: 80%; 
 
    width: 80%; 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
    top: 15px; 
 
    left: 15px 
 

 
} 
 
#magazine-detail { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 50%; 
 
    border: 1px dotted green;  
 
    bottom: 30px; 
 
}

<div id="app"> 
 
    <div id="main-section"> 
 
    <div id="magazine-detail"></div> 
 
    </div> 
 
</div>

Answer 2

はこれを試してみてください：

#app { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    border:1px solid #eee; 
} 

#main-section { 
    position: absolute; 
    top: 77px; 
    left: 0; 
    width: 100%; 
    height:400px; 
    border:1px solid #ccc; 
} 

#magazine-detail { 
    position: absolute; 
    border:1px solid #ff0000; 
    width:400px; 
    bottom:30px; 
} 

はHTML：

<div id="app"> 
    <div id="main-section"> 
     <div id="magazine-detail"> 
     This is the test<br> 
     This is the test<br> 
     This is the test<br> 
     This is the test<br> 
     This is the test 
     </div> 
    </div> 
</div> 

あなたの＃メインセクションと＃マガジン詳細絶対位置を作るために、#appが相対を配置しなければならないので、位置の絶対位置は、親コンテナの位置ごとなどの要素です。