CSS：绝对定位和溢出：隐藏答案

【问题标题】：CSS: Absolute positioning and overflow: hiddenCSS：绝对定位和溢出：隐藏
【发布时间】：2012-12-21 05:40:19
【问题描述】：

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

您可以通过滚动最后一张（绿色）图片来查看此here。

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

更新

position: relative 属性当前设置在当前提供 overflow: hidden 的 .artwork 容器上方的父级上。将overflow: hidden 添加到顶级容器可以正常工作，但似乎否定了圆角边框效果......

【问题讨论】：

标签： html css

【解决方案1】：

在你的父块上使用 position:relative。

这是因为我们的子 div 是绝对定位的。但是当您使用绝对位置时，它指的是第一个定位的父级。第一个定位的父级是第一个有位置的父级：相对（或绝对）属性

对于边界半径问题，这是一个 Firefox 和 chrome 的错误，您可以使用 hacks 来修复。在这里看到它：

编辑：总结一下：

添加位置：相对于 div 图稿。然后将您的边框半径添加到“a”父标签

【讨论】：