html - CSS 溢出 : hidden ignored

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>

样式.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
}

我知道您是否应用相对于 overflow 容器的位置。那会解决它，但我不想要它。我希望绝对容器定位到相对容器。

任何建议将不胜感激。

Answer 1

第一个解决方案

将“溢出”div 设置为相对的并删除 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