子供が固定位置の親のdiv

Question

より大きいDIV作り、次のフィドルをご覧下さい：私は青の要素も大きい（広い）を作りたい https://jsfiddle.net/a9ravkf5/3/

#navbar{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height:40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 
#sidebar{ 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 0; 
 
    height:100%; 
 
    width: 200px; 
 
    background-color: black; 
 
} 
 

 
#dropdown{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
    
 
} 
 

 
#content{ 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    min-height: 300px; 
 
    background-color: green; 
 
}

<div id="navbar"> 
 
</div> 
 

 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 

 
<div id="content"> 
 
</div>

固定位置の親より素子。それは、サイドバーの中でオプションを選択するためのドロップダウンになるだろう、そして、私はそれが複数の行（より大きい高さ）に内容を展開し、ラップしないようにしたい。

これを実行する最適なソリューションは何ですか？

Answer 1

あなたの子divは、固定divを含むよりも大きいです。 そのすべてが表示されない理由は、固定#sidebar divの前に#content divが表示されているためです。 z-indexそのような#sidebarと#contentのdivに追加

試してみてください。

#sidebar { 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 0; 
 
    height: 100%; 
 
    width: 200px; 
 
    background-color: black; 
 
    z-index: 2; // Here we give the sidebar a larger z-index resulting in it being showed on top of the content. 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    min-height: 300px; 
 
    background-color: green; 
 
    z-index: 1; // Here we give the content a lower z-index resulting in it being showed beneath the sidebar. 
 
} 
 

 
#navbar { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: 40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 

 
#dropdown { 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
}

<div id="navbar"></div> 
 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 
<div id="content"></div>

Answer 2

が、これは何が必要ですか？ コンテンツディビジョンとサイドバーに適切なZ-インデックスを設定する必要があります。

#navbar{ 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height:40px; 
 
    background-color: grey; 
 
    width: 100%; 
 
} 
 
#sidebar{ 
 
    position: fixed; 
 
    top: 40px; 
 
    left: 0; 
 
    z-index: 10; 
 
    height:100%; 
 
    width: 200px; 
 
    background-color: black; 
 
} 
 

 
#dropdown{ 
 
    position: absolute; 
 
    top: 0px; 
 
    left 0px; 
 
    width: 500px; 
 
    color: #fff; 
 
    z-index: 10; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    background-color: blue; 
 
    
 
} 
 

 
#content{ 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 200px; 
 
    right: 0px; 
 
    z-index: 0; 
 
    min-height: 300px; 
 
    background-color: green; 
 
}

<div id="navbar"> 
 
</div> 
 
<div id="sidebar"> 
 
    <div id="dropdown"> 
 
    This is a very long sentance that should be visible in its entirety. 
 
    </div> 
 
</div> 
 

 
<div id="content"> 
 

 
</div>

Answer 3

次の2つの事柄 1は#sidebarで、あなたの 'Zインデックス' で設定する必要があります。 となり、もう1つは#contentの「min-height」です。

#sidebar{ 
    position: fixed; 
    top: 40px; 
    left: 0; 
    z-index: 10; 
    height:100%; 
    width: 200px; 
    background-color: black; 
} 
#content{ 
    position: absolute; 
    top: 40px; 
    left: 200px; 
    right: 0px; 
    min-height: 400px; 
    background-color: green; 
} 

よう

、あなたはそれを修正したい場合は、その後もZインデックスを追加します。-1; in #content