如何创建一个不会溢出其父容器的叠加层？

Question

我有2列用2个容器隔开。

在第一列中，我设置了元素<div class="overlay"></div> 应覆盖并覆盖仅第一列。

我在类overlay上设置了以下css属性。

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

但是，它并不仅仅涵盖第一列。它还涵盖了另一个第二栏。

我不想设置固定宽度和固定高度，因为我想覆盖整个容器。如果我确定宽度，我可能会很快遇到问题。

以下是我目前所拥有的sample fiddle ..

Answer 1

尝试添加此CSS

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

Demo

Answer 2

我不确定您要对叠加层做什么。但你可以试试这段代码：

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

相对位置将强制它留在容器内。问题是，你的叠加层没有任何内容，它不会出现。

这就是我为了让它显示而做的 - ＆gt; https://jsfiddle.net/908zodam/（我刚在叠加层中添加了一个空白字符。）