Html 为 div 内的 div 隐藏溢出

Overflow Hidden for div inside a div

提问by Adifyr

I have an outer div and inside it, I have an image and another div. Now, the outer div has a certain width and height and has an overflow: hidden;Now my image works fine, meaning that even though it's bigger than the div it won't overflow.

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

The problem i am having is with the other div that's inside the outer div. This inner div is above the image that i have. But it still wouldn't show. But after I positioned it to absolute. It worked properly.

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

After that I positioned outside the barriers of the outer div. Now, since I made the overflow of the outer div hidden, it shouldn't show right? Yet, the inner div shows. So here is what I would like solved.

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

• Why wasn't the inner div showing initially and why did i have to give the div the property of position:absolute;?

• Why are is my inner div still showing outside the boundaries of my outer div even though my outer div has the property of overflowto hidden.

• How do I hide my inner div when its not inside the outer div. Now, note that I do not want the inner div to actually hide. I just want it not seen unless it's in my outer div.

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

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

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

Here is my source code for reference:

这是我的源代码供参考：

• The css property of the outer div:

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

• The css property of the inner div:

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

• 外层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;
  }
  

Here is a link to a jsfiddle http://jsfiddle.net/jMX3n/2/

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

回答by Adifyr

Found the solution. I deleted the outer div with the id of #banner. And then to the .bannerclass, I added position: relativeand then shifted the div a little. Apparently I had multiple div's similar to the inner div I was describing. In my .bannerclass I added the property float:left;. The overflow worked properly. Here is the new code:

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

The div class:

div类：

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

The inner div:

内部div：

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

回答by Mr Lister

In the fiddle, the middle div (.banner) isn't positioned, so the absolute positioning of the inner div (.info) is with respect to the outermost div (#banner), which does have position, but does not have overflow:hidden.

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

Therefore, in order to hide the overflow, add overflow:hiddento the outermost div as well.

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

回答by Augustus Francis

UPDATEDhttp://jsfiddle.net/Augustus06111993/Rkgfy/

更新http://jsfiddle.net/Augustus06111993/Rkgfy/

Since no Fiddle, I am taking a shot in the dark.. Since you used absolute position it will override your overflow method because

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

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It is also taken out of the normal flow of the document - it won't affect how the elements before it or after it in the HTML are positioned on the Web page

这告诉浏览器将要定位的任何内容都应该从文档的正常流中删除，并将放置在页面上的确切位置。它也脱离了文档的正常流程——它不会影响 HTML 中它之前或之后的元素在网页上的定位方式

Your outer div and inner div have same dimensions.. Try changing the css of inner div like this and you can see your image and div seperately

您的外部 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;
}