html - CSS:绝对定位和溢出:隐藏

Question

我正在尝试制作一个缩略图查看器，当您将鼠标悬停在缩略图上时，您会看到一封较大电子邮件的缩略图大小的 View 。在缩略图周围移动时，您会看到较大图片的各个部分。

可以看到这个here通过滚动最后一个(绿色)图像。

当您翻身时，我会在低分辨率缩略图和高分辨率版本之间交换图像。出于某种原因，这个较大的图像不再受父级的 overflow: hidden 属性约束。我需要做什么才能让它发挥作用？

更新

position: relative 属性当前设置在当前提供 overflow: hidden 的 .artwork 容器之上的父级上。将 overflow: hidden 添加到顶层容器可以正常工作，但似乎会抵消圆 Angular 效果...

Answer 1

在父 block 上使用 position:relative。

这是因为我们的子 div 是绝对定位的。但是当你使用绝对位置时，它指的是第一个定位的父级。第一个定位的父级是第一个拥有 position: relative (or absolute) 属性的父级

对于边框半径问题，这是一个 firefox 和 chrome 错误，您可以使用 hack 修复。在这里查看:

CSS3 border-radius clipping issues

编辑:总结:

添加position:relative于div作品。然后将您的边框半径添加到“a”父标签