I'm having trouble understanding why the overflow: hidden property is being overridden by a descendant element. Take a look at this example I've put together http://jsfiddle.net/2fRxc/.
HTML
<div class="relative">
<div class="overflow">box with "overflow:hidden;" (HOVER ME)
<div class="absolute">absolute box which ignores the "overflow:hidden;" rule of the 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
}
I understand that applying position: relative to the overflow container would solve the issue, but I don't want to do that. I want the absolute container positioned relative to its container.
Any suggestions would be greatly appreciated.