css的绝对定位

假设绝对定位的元素的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>

效果截图:

作者:冯亮
         
能力有限,水平一般。如有错误,欢迎指正
原文地址:https://www.cnblogs.com/fengliang/p/3499106.html