CSS - 溢出和定位答案

【问题标题】：CSS - Overflow and PositioningCSS - 溢出和定位
【发布时间】：2014-07-19 05:22:46
【问题描述】：

我看到一个类似的帖子处理这个问题，但我的问题有点不同。

在概述的问题 HERE 中，概念是 OUTER div 相对定位，INNER div 定位为 ABSOLUTE，overflow:hidden 将保存下来。

我的问题是 div、INNER 和 OUTER 都是绝对定位的。如何仍然保留溢出：隐藏在 OUTER div 上？

【问题讨论】：

你需要添加一些代码或小提琴
溢出：隐藏应该不受元素位置的影响。有问题吗？你有示例代码要显示吗？理想情况下，您将代码复制到此处，以便将来即使在问题解决后，这个问题仍然有价值（对于找到此帖子的未来访问者）。
我正在整理一个示例 jFiddle，但我看到的正是您所说的 @cale_b。两个 div 都是绝对定位的，但溢出：隐藏被保留。我一定在某处发生了 CSS 冲突。

标签： html css position overflow hidden

【解决方案1】：

不确定您的问题，但这是您试图实现的目标吗？看到这个jsfiddle

CSS：

#outer {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 80px;
    width: 50px;
    overflow: hidden;
}

#inner {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 50px;
    width: 50px;
}

用html：

<div id='outer'>
    <div id='inner'>
        // Your stuff here
    </div>
</div>

【讨论】：

【解决方案2】：

位置：绝对；

如果应用位置：绝对；对于任何块元素（例如：div class="inner" ），容器块（例如：div class="outer" ）无法确定该元素的尺寸。

溢出：隐藏；

应用溢出：隐藏；对于任何元素意味着，它会检测该元素的真实尺寸。如果该元素具有给定尺寸（宽度：200 像素；高度：200 像素；）溢出：隐藏；确定元素的尺寸为 200px,200px。如果元素未指定尺寸，则溢出：隐藏将总成分的面积确定为该元素的尺寸。

因此，在您的情况下，您将为外部块应用固定宽度和固定高度。否则，您不能同时将溢出隐藏和绝对位置应用于外部块。

如果无法应用固定的宽度和高度，css h 的小技巧取决于设计。如果您可以更多地解释设计，我可以解释更多。

【讨论】：