親コンテナをオーバーフローさせないオーバーレイを作成するにはどうすればいいですか？

Question

2つの列を2つのコンテナで区切っています。私はONLY最初の列をカバーし、オーバーレイすべき要素<div class="overlay"></div> を設定している最初の列で

。

クラスoverlayに次のCSSプロパティを設定しました。

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255,255,255,0.8); 
} 

ただし、最初の列だけではありません。他の2列目もカバーしています。

コンテナ全体をオーバーレイしたいので、修正幅と高さを設定したくありません。私は幅を修正すればすぐに問題に遭遇するかもしれません。ここで

は

Answer 1

てみてください、私はあなたがオーバーレイでやろうとしているかわからないこのCSS

.container-1{ 
    overflow: hidden; 
    position: relative; 
} 

Demo

Answer 2

を追加..私はこれまで持っているもののsample fiddleです。しかし、このコードを試すことができます：

.overlay { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255,255,255,0.8); 
} 

相対位置は、それがコンテナ内にとどまるように強制します。問題は、オーバーレイには何も表示されず、表示されないということです。

これは私がそれを表示させるために行わものです - >https://jsfiddle.net/908zodam/（私はちょうどオーバーレイ内の空白文字を追加しました。）