请教!关于相对定位于绝对定位的一个问题
最近遇到一个比较神奇的事情,搜索了许多资料,发现几乎没人提这个问题。问题如下:当绝对定位元素包含块设置了overflow:auto时,绝对定位元素始终在包含块之内,包含块会遮盖绝对定位元素的超出其可视区域部分;如果包含块不设置overflow,则绝对定位元素浮现在包含块之上。按照绝对定位元素脱离于文件流的说法,应该无论如何都应该在包含块之上才对,不知有没有大侠能够解除心中疑惑,有没有好的解决办法(最好不要是相对于body这类的解决办法),谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>相对定位和绝对定位问题演示</title>
</head>
<body>
<h3>绝对定位元素的包含块设置了overflow:auto,绝对定位元素始终在包含块内,包含块遮盖了绝对定位元素的超出其可视区域部分</h3>
<div style="width:300px;height:300px;background:red;border:1px solid read;overflow:auto;">A
<div style="width:200px;height:200px;background:yellow;border:1px solid yellow">B
<div style="position:relative;width:100px;height:20px;background:white;border:1px solid gray;">C
<div style="position:absolute;top:-50px;left:20px;width:250px;height:50px;background:green;">D-我是弹出菜单,相对于C进行绝对定位,但我被A遮住了</div>
</div>
</div>
</div>
</br>
</br>
<h3>绝对定位元素的包含块不设置overflow属性,绝对定位元素覆盖在包含块之上</h3>
<div style="width:300px;height:300px;background:red;border:1px solid read;">A
<div style="width:200px;height:200px;background:yellow;border:1px solid yellow">B
<div style="position:relative;width:100px;height:20px;background:white;border:1px solid gray;">C
<div style="position:absolute;top:-50px;left:20px;width:250px;height:50px;background:green;">D-我是弹出菜单,相对于C进行绝对定位,我在A上面</div>
</div>
</div>
</div>
</body>
</html>