-5

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

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

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

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

  • 即使我的外部 div 具有 to 的属性，为什么我的内部 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/的链接

4

3 回答 3

5

找到了解决方案。我删除了 id 为的外部 div #banner。然后在.banner课堂上，我添加position: relative并稍微移动了 div。显然我有多个 div 类似于我所描述的内部 div。在我的.banner课堂上，我添加了 property 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;
}
于 2013-09-20T09:53:34.080 回答
1

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

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

于 2013-09-20T09:32:29.537 回答
0

更新 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;
}
于 2013-09-20T09:28:33.120 回答