Question

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

我遇到的问题是外部div中的另一个div。这个内部div高于我的图像。但它仍然不会显示。但在我把它定位到绝对之后。它运作正常。

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

为什么内部div最初没有显示，为什么我必须给div position:absolute;的属性？
为什么我的内部div仍然显示在我的外部div的边界之外，即使我的外部div具有overflow到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的外部div。然后到.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;
}

Answer 2

在小提琴中，中间div（.banner）没有定位，所以内部div（.info）的绝对定位是相对于最外面的div（#banner），它确实有位置，但是没有overflow:hidden。

因此，为了隐藏溢出，请将overflow:hidden添加到最外层的div。

Answer 3

<强>已更新 http://jsfiddle.net/Augustus06111993/Rkgfy/

由于没有小提琴，我在黑暗中拍摄.. 由于您使用绝对位置，它将覆盖您的溢出方法，因为

这告诉浏览器应该放置什么从文档的正常流程中删除，并将其放入页面上的确切位置。它也脱离了正常流程该文件 - 它不会影响它之前或之后的元素 HTML中的它位于网页上

您的外部div和内部div具有相同的尺寸。尝试更改内部div的css，您可以单独看到您的图像和div

.info {
     width: 50%;
     height: 50%;
     float:left;
     opacity: 0.70;
}

.image {
     width:50%;
     height:50%;
}

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

溢出隐藏div中的div

3 个答案: