假设绝对定位的元素的id为absoluteDiv。
当包含absoluteDiv的块中没有设置position:relative时, absoluteDiv会相对于浏览器(window.top)定位。如果包含absoluteDiv的块中设置position:relative了, 不管这个块是其父级, 还是其父级, absoluteDiv都会相对于这个块开定位。
下面这个例子可以证明这一点
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> .detailInfo{ filter:alpha(opacity=50); opacity: 0.5; position: absolute; text-align: center; background-color: #ffffff; top: 1px; left:1px; width: 100%; height: 100%; } </style> <title>正则表达式</title> </head> <body> <div style=" 400px; height: 300px; position: relative; margin:50px 50px; border: 1px solid #000000"> <div style=" 270px; height: 166px; margin:50px 50px; border: 1px solid #FF0000"> <img src="./images/screencut.png" border="0" /> <div class="detailInfo"> descript here </div> </div> </div> </body> </html>
效果截图:
