位置固定のオーバーレイがdiv内のすべてのコンテンツを表示しない

Question

divの内部にオーバーレイを作成しました。位置を固定しました。ウェブサイトの最上部からスライド効果を使用して表示したいからです。ここで

は、CSSコードです：

.overlay { 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background-color: rgba(0, 0, 0, 0.75); 
z-index: 9999; 
color: white; 
display: inline-block; 
height: 1040px;//as example 

} 

問題は、オーバーレイdivの内側にいないすべてのコンテンツが表示されていることです。オーバーフロー：autoを挿入しようとしましたが、動作しません。ここで

例です：
demo

Answer 1

固定位置を保持したい場合は、overflow : auto;というプロパティと100％の高さでスクロールバーを追加することができます。

.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.75); 
    z-index: 9999; 
    color: white; 
    display: inline-block; 
    height: 100%; 
    overflow: auto; 
} 

Fiddle

Answer 2

あなたは、固定を使用する必要がありますか？

Position : absolute 

あなたが望むものを正しく理解すれば、私のためのトリックはありますか？

Answer 3

それは流れのうち、すでにだからあなたはfixed要素にoverflowプロパティを追加することはできません。コンテンツはcontainerにラップされているため、ソリューションの1つはスクロール可能にすることです。

​​

Answer 4

.colTwo{ 
    height: 840px; 
    background-color: green; 
} 

.show { 
    padding: 8px; 
    background-color: #333; 
    color:#fff; 
    display: inline-block; 
    width: 120px; 
    position:fixed; 
} 


.overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, 0.75); 
    z-index: 9999; 
    color: white; 
    height: 100%; 
    display: inline-block; 
    width: 70%; 
    margin: auto; 
    overflow: auto; 
} 

.row { 
    width: 100%; 
    position: absolute; 
    }