为 div 内的 div 隐藏溢出

Question

我有一个外部 div，里面有一个图像和另一个 div。现在，外部 div 有一定的宽度和高度，并且有一个overflow: hidden;Now my image 工作正常，这意味着即使它比 div 大它也不会溢出。

我遇到的问题是外部 div 内的另一个 div。这个内部 div 位于我拥有的图像上方。但它仍然不会显示。但是在我将它定位到绝对之后。它工作正常。

之后，我定位在外部 div 的障碍之外。现在，由于我隐藏了外部 div 的溢出，它不应该显示对吗？然而，内部 div 显示。所以这就是我想要解决的问题。

• 为什么内部 div 最初没有显示，为什么我必须给 div 的属性position:absolute;？

• 为什么即使我的外部 div 具有overflowto属性，我的内部 div 仍然显示在外部 div 的边界之外hidden。

• 当我的内部 div 不在外部 div 内时，如何隐藏它。现在，请注意，我不希望内部 div 实际隐藏。我只是不想看到它，除非它在我的外部 div 中。

这是我的源代码供参考：

• 外层div的css属性：

  .banner {
      width: 250px;
      height: 500px;
      overflow: hidden;
      float: left;
      margin-right: 20px;
      cursor: pointer;
  }
  

• 内部div的css属性：

  div.info {
       position: absolute;
       width: 250px;
       height: 500px;
       top: 0px;
       opacity: 0.70;
       -webkit-transition: -webkit-transform 300ms;
  }
  

这是 jsfiddle http://jsfiddle.net/jMX3n/2/的链接

Answer 1

找到了解决办法。我删除了 ID 为#banner. 然后到.banner课堂上，我添加position: relative然后稍微移动了 div。显然我有多个 div 类似于我描述的内部 div。在我的.banner课堂上，我添加了属性float:left;。溢出工作正常。这是新代码：

div类：

.banner {
    position: relative;
    top: 100px;
    left: 250px;
    width: 250px;
    height: 500px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    cursor: pointer;
}

内部div：

div.info {
    position: absolute;
    width: 250px;
    height: 500px;
    top: 0px;
    left: -250px;
    opacity: 0.70;
    -webkit-transition: -webkit-transform 300ms;
}