Question

我正在努力理解，为什么溢出：隐藏被后代元素覆盖。请查看我创建的http://jsfiddle.net/2fRxc/示例。

HTML

<div class="relative">
    <div class="overflow">box with "overflow:hidden;" (HOVER ME)
        <div class="absolute">absolute box which ignore "overflow:hidden;" rule of parent box</div>
    </div>
</div>

的style.css

html, body {
    height:100%;
}
.relative {
    position:relative;
    padding:20px;
    width:50%;
    height:50%;
    background:blue;
}
.overflow {
    width:100%;
    height:100%;
    background:#ff0;
    overflow:hidden;
    float:left;
}
.overflow:hover .absolute {
    opacity:1
}
.absolute {
    width:100%;
    height:100%;
    background:#f00;
    position:absolute;
    top:0;
    left:0;
    opacity:0
}

我知道您是否相对于溢出容器应用了位置。这将解决它，但我不想要它。我希望绝对容器位于相对容器中。

任何建议都会非常感激。

Answer 1

第一解决方案

将“overflow”div设置为relative，并删除float:left属性：

.overflow {
    width:100%;
    height:100%;
    background:#ff0;
    overflow:hidden;
    position:relative;
    top:0;
    left:0;
}

以下是演示：JSFiddle

第二种解决方案

您知道您有20px填充，因此您可以定义绝对元素的4个边界（并且不指定height和width属性）：

.absolute {
    background:#f00;
    position:absolute;
    top:20px;
    left:20px;
    bottom:20px;
    right:20px;
    opacity:0
}

以下是演示：JSFiddle

Answer 2

.relative{
    position:relative;
    width: 200px;
}
.overflow{
    width:300px;
    height:20px;
    background:#ff0;
    overflow:hidden;
}
.overflow:hover .absolute{
    opacity:1
}
.absolute{
    background:#f00;
    position:absolute;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    opacity:0;
    overflow: hidden;
}

http://jsfiddle.net/88fYK/438/

CSS溢出：隐藏被忽略

2 个答案:

第一解决方案

第二种解决方案